Knockout js复选框检查绑定

时间:2013-08-05 15:46:36

标签: javascript knockout.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/

感谢您的帮助。

1 个答案:

答案 0 :(得分:11)

在版本3.0之前的Knockout中,绑定按顺序触发,因此您的问题是checked绑定在attr绑定之前触发。

所以你需要改变绑定的顺序:

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

演示JSFiddle

或者,当您更新到3.0(演示JSFiddle)时,您的原始代码将有效。