ドロップダウンの値がバインドされていないのはなぜですか？

Question

Knockout.jsは、MVVMを実装するのに最適なライブラリです。

以下の最小サンプルは、knockout.jsを使用してグリッドにバインドします。

ビュー

<div id="divDecision"> 
    <div id="divDecisionBinding" data-bind="template: { name: 'tmplDecision' }">/div> 
    <script id="tmplDecision" type="text/x-jquery-tmpl"> 
    <table id="tblDecision"> 
     <thead> 
     <tr> 
      <th>Candidate</th> 
      <th>Decision</th> 
     </tr> 
     </thead> 
     <tbody data-bind="foreach:decisionList" id="tbList"> 
     <tr> 
      <td data-bind="text: candidate"></td> 
      <td> 
      <select data-bind="attr: { id: 'cmbDecision' + ':' + $index(), name: 'cmbDecision' + ':' + $index()}, options: viewModelDecision.decisionLookup, value: 'decision', optionsText: 'decision_desc', optionsCaption: 'Please select'"></select> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </script> 
</div> 

viewModelDecision（2人のメンバー：decisionLookupとdecisionList）

decisionLookup 
0 : {decision: "N", decision_desc: "No need"} 
1 : {decision: "A", decision_desc: "Approved"} 
2 : {decision: "R", decision_desc: "Rejected"} 
decisionList 
0 : {candidate: "000000001", decision: "A" } 
1 : {candidate: "000000002", decision: "N" } 

スクリプト

var viewModelDecision; 
//viewModelDecision gets loaded from a web service 
viewModelDecision = result; 
//Now the binding happens 
ko.applyBindings(viewModelDecision, document.getElementById("divDecision")); 

回の出力

000000001 Please select 
000000002 Please select 

調査結果

1. フィールドcandidateが正常にドロップダウンリストcmbDecision:Xの
2. オプションは、ドロップダウンリストcmbDecision:Xの値がバインドされていない
3. を正常にバインドされてバインドされています - キャプション "Please select "がデフォルトで選択されています。

質問ドロップダウンリストの値がデフォルトで選択されていないのはなぜ

？

Answer 1

valueバインディングは、あなたのビューモデルの観察可能なプロパティをターゲットにする必要があります。

おそらくoptionsValueバインディングを使用して、.decisionに格納されているIDを選択肢として使用するようにknockoutに指示することを意味します。

<select data-bind="options: viewModelDecision.decisionLookup, value: selectedDecision, optionsValue: 'decision', optionsText: 'decision_desc', optionsCaption: 'Please select'"></select> 

し、VM内：

this.selectedDecision = ko.observable("A"); // Pre-select the 2nd item