KnockoutJS - optgroup ve javascript nesnelerinin seçildiği bağlama değeri

Question

KnockoutJS kullanarak optgroups içeren bir seçim listesi oluşturmak için bir örnek here buldum. Bu iyi çalışır, ancak o zaman, kendi javascript nesneye açılır değerini bağlayan o nesnenin belirli bir özelliğe erişmek istiyorum:

<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

bu durum için iyi bir seçim "el yapımı" seçeneklerinizi options bağlamasının oluşturduğu seçeneklerle aynı şekilde davranmasına izin veren hızlı özel bir bağ oluşturmaktır (nesneyi meta veri olarak ekler). Burada

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

Numune: Eğer yapmak istiyorsanız http://jsfiddle.net/rniemeyer/aCS7D/

Answer 2

başlığı ile bu sürümü ve ebeveyn öğesi seçilir: Bunu ister kullanırsınız

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

: gibi basitçe görünebilir bağlayıcı

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