Question

我的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/

Answer 1

当您使用checked绑定和click绑定时，需要从点击处理程序to trigger the browsers default behavior返回true，以便正确选中复选框：< / p>

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。

复选框状态从模型到UI的传播不正确

1 个答案: