为什么下拉列表的值没有绑定？

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字段绑定成功
2. 下拉列表cmbDecision:X的选项绑定成功
3. 下拉列表cmbDecision:X 的值未绑定 - 默认选择标题“Please select”。

问题

为什么默认不选择下拉列表的值？

Answer 1

value 绑定应该针对您的视图模型的可观察属性。

您可能打算使用optionsValue 绑定来告诉knockout 使用存储在.decision 中的ID 作为选择。

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

在你的虚拟机中：

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