Question

我有一个带复选框的列表，当我点击其中一个时，它会显示在SelectedUsers中，按预期工作，并且复选框data-bind="checked: AllChecked"也会被检查，但它不应该是

<div data-bind="foreach: SelectedUsers">
    <p>
        <span data-bind="text: userName" ></span>
    </p>
</div>

但是，当我使用data-bind="checked: AllChecked"时，SelectedUsers中不显示任何内容，之后，当我点击某个复选框时，列表中的所有项目都被选中，{{1}中没有显示任何内容}

出了什么问题？例如：http://jsfiddle.net/falkone/cr763bfj/

SelectedUsers

淘汰赛-3.3.0：

<div id="sideB">
    <div data-bind="foreach: AllUsers">
        <label>
            <input type="checkbox" name="checkedUser" data-bind="value: userName, checked:$root.selectedUserNames" />
            <span data-bind="text: userName" ></span>
        </label> 
    </div>
    Selected
    <div data-bind="foreach: SelectedUsers">
        <p>
            <span data-bind="text: userName" ></span>
        </p>
    </div>
        <label><input type="checkbox" data-bind="checked: AllChecked" />Check all</label>
</div>

Answer 1

调用computed时传递给write的值不是用户名，而是true / false布尔值，表示复选框状态。

此外，由于selectUserNames是observableArray，因此您需要push()新的userName，而不是替换整个数组数据。

请改为尝试：

read: function() {
        var firstUnchecked = ko.utils.arrayFirst(dataSource, function(item) {
            return self.selectedUserNames().indexOf(item.userName()) == -1;
        });
        return firstUnchecked == null;
    },
write: function(value) {
        if (value) {
            ko.utils.arrayForEach(dataSource, function(item) {
               if (self.selectedUserNames().indexOf(item.userName()) == -1)
                   self.selectedUserNames.push(item.userName());
            });
        }
        else {
            self.selectedUserNames.removeAll();
        }
    }

更新（根据您的评论）：

还需要更改read以使用userName检查是否存在第一个未经检查的indexOf：

var firstUnchecked = ko.utils.arrayFirst(dataSource, function(item) {
    return self.selectedUserNames().indexOf(item.userName()) == -1;
});

请参见修改后的Fiddle

敲除，选中所有复选框并查看所选复选框的列表

1 个答案: