2012-08-29 13 views
5

Tôi đang sử dụng knockout.js để tạo một mã số <option> của <select> và cũng để đặt giá trị được chọn mặc định của nó. Tất cả hoạt động như mong đợi cho đến khi Tôi thêm liên kết optionsValue, tại thời điểm đó trình đơn thả xuống không còn hiển thị giá trị ban đầu thích hợp khi tải trang.Làm cách nào để bạn sử dụng knockout.js để tạo một mã số <option> của <select> với cả văn bản và giá trị cũng như đặt giá trị được chọn ban đầu?

Nói cách khác, các công trình này:

<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name'"></select> 

... nhưng điều này không làm việc:

<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select> 

Dưới đây là đơn giản hóa, mã hoàn chỉnh của tôi:

<!doctype html> 
<html> 
    <head> 
     <title>Demo</title> 
     <script src='knockout-2.1.0.debug.js'></script> 
    </head> 
    <body> 
     <select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select> 
     <script> 
      function QuickTransferViewmodel() 
      { 
       var self = this; 

       self.accounts = 
       [ 
        { id: 0, name: "Spending" }, 
        { id: 1, name: "Savings" } 
       ]; 

       self.selectedAccount = ko.observable(self.accounts[1]); 
      } 
      ko.applyBindings(new QuickTransferViewmodel()); 
     </script> 
    </body> 
</html> 

tôi sẽ mong đợi trình đơn thả xuống hiển thị "Tiết kiệm" như được chọn theo mặc định. Nó chỉ làm như vậy nếu tôi loại bỏ các ràng buộc optionsValue.

Cảm ơn trước!

+0

Không liên quan trực tiếp đến câu hỏi của bạn, nhưng bạn có thể nhận được một số kết quả bất thường nếu liên kết 'giá trị' là trước' tùy chọn'. –

Trả lời

4

Ràng buộc optionsValue được sử dụng để xác định thuộc tính nào được sử dụng để đặt thuộc tính value trên các yếu tố option được tạo.

này thay đổi một dòng làm việc mẫu của bạn cho tôi:

self.selectedAccount = ko.observable(1);

bạn value ràng buộc được thiết lập để selectedAccount mà là một ID, và các giá trị trong tạo options yếu tố của bạn có thực sự các ID.

+0

Ah, cảm ơn bạn! Điều đó có ý nghĩa. Trong tài liệu hướng dẫn knockout.js và hướng dẫn, chúng không sử dụng bindingValue binding. Tôi cho rằng trong trường hợp không có các giá trị tùy chọn được chỉ định, knockout.js sẽ tự động theo dõi giá trị dưới dạng tham chiếu đến các mục trong mảng tùy chọn bị ràng buộc. Nhưng như bạn đã chỉ ra, điều này làm việc khác nhau nếu bạn chỉ định một ràng buộc tùy chọnValue. Đó là lý do tại sao mã của tôi chỉ hoạt động khi tùy chọnValue bị bỏ qua. Cảm ơn một lần nữa! – Bryan

0

Bạn phải làm cho "giá trị" một trong những người thân trong danh sách tùy chọn .....

tôi đã kết thúc viết một số coffeescript để xử lý này ....

replaceWithMatchingExt = (observableToFind, observablePropertyToSet, list, match) -> 
    return if not observablePropertyToSet 
    return if not observableToFind() 
    return if list.length == 0 
    observablePropertyToSet (x for x in list when x[match]() == observableToFind()[match]())[0] 

replaceWithMatching = (prop, list, match) -> 
    replaceWithMatchingExt(prop, prop, list, match)  

sau đó cho phép tôi (cũng coffeescript ...)

replaceWithMatching @Product, @Products(), 'Id' 

cho rằng sản phẩm là giá trị, sản phẩm là danh sách các lựa chọn .... và 'Id' là tài sản tôi muốn để phù hợp trên. tức là, Id là những gì tôi có thể sử dụng để làm việc ra các sản phẩm tương đương.

Mã sau đó sẽ thay thế Sản phẩm có thể quan sát bằng một đối tượng nằm trong danh sách Sản phẩm nếu nó khớp với một sản phẩm.

Các vấn đề liên quan