optgroupで選択値を設定するknockoutjs

Question

これはjsfiddle http://jsfiddle.net/gauldivic/wLrhrno9/ですが、これは私が望むものに近いです。それはoptgroupsを持っている、しかし、私は

が

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

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 = function() { 
    this.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") 
     ]) 
    ]); 

    this.selectedOption = ko.observable(); 

    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected.someOtherProperty() : 'unknown'; 
    }, this); 
}; 

ko.applyBindings(new ViewModel()); 

HTML

---

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

私はこれを知っている値

JSを設定する方法を見つけ出すように見えることはできません選択したオプションを設定する場所ですが、どのようにそれを働かせる。 this.selectedOption = ko.observable（）; 同じページで複数の選択肢を使用しても同じですか？ これをデータベースで使用し、オプションを事前に選択できるようにします。

Answer 1

私はそれが上で動作させることができます。http://jsfiddle.net/brianlmerritt/3m67L5h0/

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


<hr /> 

<div data-bind="text: specialProperty"></div> 

は、私が最初のオプションは、のために何であったかわからなかった - あなたはそれをコメント解除することによってバックしたい場合にそれを置くことができます。オプションの値は、それが、私はそれが設定されているので、あなたが見ることができる評価に特別な他の変数の名前を変更しViewModelに

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

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

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

var ViewModel = function() { 
    this.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") 
     ]) 
    ]); 

    this.selectedOption = ko.observable(); 

    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected : 'unknown'; 
    }, this); 
}; 

ko.applyBindings(new ViewModel()); 

へ

小さな変化の観察可能だとして括弧でなければならないこと

注意。

最後に、observableが常に値に設定されるため、specialPropertyで.someOtherProperty（）または.value（）を呼び出す必要はありません。