KnockoutJS - Wiązanie wartości zaznaczenia przy użyciu obiektów optgroup i javascript

Question

Znalazłem przykład here, aby utworzyć listę wyboru z optgroups przy użyciu KnockoutJS. Działa to dobrze, ale chcę, aby powiązać wartość rozwijanej do mojego JavaScript Object, a następnie uzyskać dostęp do szczególnej właściwości tego obiektu:

<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

Dobrym wyborem dla tej sytuacji jest utworzenie szybkiego niestandardowego powiązania, które pozwala, aby twoje "ręcznie wykonane" opcje zachowywały się w taki sam sposób jak opcje utworzone przez powiązanie options (dołącza obiekt jako metadane). Wiązanie może po prostu wyglądać następująco:

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

byłoby go używać jak:

<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> 

Próbka tutaj: http://jsfiddle.net/rniemeyer/aCS7D/

Answer 2

Ta wersja z podpisem i jeśli chcesz mieć wybrana pozycja dominująca:

<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>