淘汰赛js复选框检查绑定答案

【问题标题】：Knockout js checkbox checked binding淘汰赛js复选框检查绑定
【发布时间】：2013-08-06 09:42:48
【问题描述】：

在淘汰赛 js 中，我试图对一组数据执行 foreach 以显示复选框。我遇到的问题是，在我与其中一个框交互之前，选中的数据绑定似乎不会运行。例如，下面我生成了 5 个文本框，其中没有一个显示为选中状态。但是，当我单击“一”时，“二”和“四”也会被选中，因为它们应该从一开始就被选中。

Javascript：

var viewModel = {};

viewModel.choices = ["one", "two", "three", "four", "five"];
viewModel.selectedChoices = ko.observableArray(["two", "four"]);

viewModel.selectedChoicesDelimited = ko.dependentObservable(function () {
        return viewModel.selectedChoices().join(",");
    });

ko.applyBindings(viewModel);

HTML：

<ul class="options" data-bind="foreach: choices">
    <li><label><input type="checkbox" name="NotifyMembers" data-bind="checked: $parent.selectedChoices, attr: { value: $data }" /><span data-bind="text: $data"></span></label></li>
</ul>
<hr />
<div data-bind="text: selectedChoicesDelimited"></div>

小提琴位于：http://jsfiddle.net/bvGG3/1/

感谢您的帮助。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

在版本 3.0 之前的 Knockout 中，绑定按顺序触发，所以您的问题是您的 checked 绑定在您的 attr 绑定之前触发。

因此您需要更改绑定的顺序：

<input type="checkbox" name="NotifyMembers" 
       data-bind="attr: { value: $data }, checked: $parent.selectedChoices" />

演示JSFiddle.

或者当您更新到 3.0 时，您的原始代码将可以工作（演示 JSFiddle）。

【讨论】：