KnockoutJS - Giá trị ràng buộc của lựa chọn với các đối tượng optgroup và javascript

Question

Tôi đã tìm thấy một ví dụ here để tạo danh sách lựa chọn với các nhóm sử dụng KnockoutJS. Đây hoạt động tốt, nhưng tôi muốn để ràng buộc giá trị của thả xuống để đối tượng javascript của riêng tôi, sau đó truy cập vào một tài sản cụ thể của đối tượng đó:

<select data-bind="foreach: groups, value:selectedOption"> 
    <optgroup data-bind="attr: {label: label}, foreach: children"> 
     <option data-bind="text: label"></option> 
    </optgroup> 
</select> 

function Group(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function Option(label, property) { 
    this.label = ko.observable(label); 
    this.someOtherProperty = ko.observable(property); 
} 

var viewModel = { 
    groups: ko.observableArray([ 
     new Group("Group 1", [ 
      new Option("Option 1", "A"), 
      new Option("Option 2", "B"), 
      new Option("Option 3", "C") 
     ]), 
     new Group("Group 2", [ 
      new Option("Option 4", "D"), 
      new Option("Option 5", "E"), 
      new Option("Option 6", "F") 
     ]) 
    ]), 
    selectedOption: ko.observable(), 
    specialProperty: ko.computed(function(){ 
     this.selectedOption().someOtherProperty(); 
    }) 
}; 

ko.applyBindings(viewModel); 

Answer 1

Một lựa chọn tốt cho tình huống này là tạo một ràng buộc tùy chỉnh nhanh chóng cho phép các tùy chọn "làm bằng tay" của bạn hoạt động giống như các tùy chọn được tạo bởi ràng buộc options (gắn đối tượng dưới dạng siêu dữ liệu). Các ràng buộc chỉ có thể trông giống như:

ko.bindingHandlers.option = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.selectExtensions.writeValue(element, value); 
    }   
}; 

Bạn sẽ sử dụng nó như:

<select data-bind="foreach: groups, value: selectedOption"> 
    <optgroup data-bind="attr: {label: label}, foreach: children"> 
     <option data-bind="text: label, option: $data"></option> 
    </optgroup> 
</select> 

mẫu ở đây: http://jsfiddle.net/rniemeyer/aCS7D/

Answer 2

Phiên bản này với chú thích và nếu bạn muốn có mục mẹ chọn:

<select data-bind="value: selectedOption "> 
    <option data-bind="value:'', text:'Select'"></option> 
    <!-- ko foreach: groups --> 
     <optgroup data-bind="attr:{label: label}"> 
      <option data-bind="value: $data, text:label"></option> 
      <!-- ko foreach: children --> 
       <option data-bind="value: $data, text:label"></option> 
      <!-- /ko --> 
     </optgroup> 
    <!-- /ko --> 
</select>