2

我的 UI 中发生了使用淘汰赛绑定的有趣事情。

Ui 定义如下：

<ul id="items" data-bind="foreach: items">
    <li>        
        <input type="checkbox" data-bind="checked: $root.selectedItems, value: $data, click: $root.itemsChanged"/>
        <label data-bind="text: $data"></label>
    </li>
</ul>

<div data-bind="foreach: selected">
    <p data-bind="text:$data"></p>
</div>

包含在头部的 Js 如下所示：

function ViewModel(items) {
    var self = this;
    self.items = ko.observableArray(items);
    self.selectedItems = ko.observableArray([]);
    self.itemsChanged = function () {
        self.selected.removeAll();
        self.selectedItems().forEach(function (e) {
            self.selected.push(e);
        });
    };
    self.selected = ko.observableArray([]);
}

var model = new ViewModel(['Read paper', 'Clear room', 'Cook food', 'Buy rice']);
window.onload = function () {
    ko.applyBindings(model);
};

我的期望：当我选中第一个复选框时，它应该显示选中状态，并且 div 应该正确填充选中的项目。

我观察到：当我选中第一个复选框时，它没有被选中。但下面的 div 填充正确。检查另一个复选框，单击的第一个复选框被选中；单击的那个没有得到检查。然而，div 反映了该项目。

难道我做错了什么？

小提琴使用：http: //jsfiddle.net/deostroll/BNfKF/

4

1 回答 1

0

当您将checked绑定与绑定一起使用时，click您需要true从单击处理程序返回以触发浏览器的默认行为，以便正确检查您的复选框：

self.itemsChanged = function () {
    self.selected.removeAll();
    self.selectedItems().forEach(function (e) {
        self.selected.push(e);
    });
    return true;
};

演示JSFiddle。

但是itemsChanged实际上并不需要您的代码，因为 KO 将跟踪selectedItems数组中的选定项目，因此无需复制它。您使用可以直接使用它：

<ul id="items" data-bind="foreach: items">
    <li>        
        <input type="checkbox" 
             data-bind="checked: $root.selectedItems, value: $data"/>
        <label data-bind="text: $data"></label>
    </li>
</ul>

<div data-bind="foreach: selectedItems">
    <p data-bind="text:$data"></p>
</div>

在您的 ViewModel 中，您不需要该itemsChanged功能：

function ViewModel(items){
    var self = this;
    self.items = ko.observableArray(items);
    self.selectedItems = ko.observableArray([]);       
    self.selected = ko.observableArray([]);
}

演示JSFiddle。

于 2013-09-04T13:43:49.887 回答