KnockoutJS - optgroupとjavascriptオブジェクトでselectの値をバインドする

Question

hereの例では、KnockoutJSを使用してoptgroupsで選択リストを作成しました。これは正常に動作しますが、私はその後、私自身のjavascriptオブジェクトにドロップダウンリストの値をバインドし、そのオブジェクトの特定のプロパティにアクセスしたい：

<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

このような状況のために良い選択あなたの "手作りの"オプションは、optionsバインディングによって作成されたオプション（メタデータとしてオブジェクトを添付）と同じように動作するようにする、迅速なカスタムバインディングを作成することです。ここ

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

サンプル：あなたが持っているしたい場合はhttp://jsfiddle.net/rniemeyer/aCS7D/

Answer 2

キャプションとこのバージョンと親アイテムが選択された：あなたはそれが好きで使用することになり

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

：のように単純に見ることができる結合

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