剔除，select 个所有复选框并查看 select 个复选框的列表

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 中没有显示任何内容，此后，当我单击某个复选框时，列表中的所有项目都被选中并且 [=] 中没有显示任何内容15=]

怎么了？示例：http://jsfiddle.net/falkone/cr763bfj/

<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>

Knockout-3.3.0:

function User(data) {
this.userName = ko.observable(data.userName);
this.selected = ko.observable(data.selected);

}

var dataSource = [new User({userName: "Bill", selected: false}),
    new User({userName: "Andrii", selected: false})
    ];

function UsersViewModel() {
    var self = this;
    self.AllUsers = ko.observableArray(dataSource);
    self.SelectedUsers = ko.observableArray([]);

self.selectedUserNames = ko.observableArray([]);

self.selectedUserNames.subscribe(function(newValue) {
    var newSelectedUserNames = newValue;
    var newSelectedUsers = [];
    ko.utils.arrayForEach(newSelectedUserNames, function(userName) {
        var selectedUser = ko.utils.arrayFirst(self.AllUsers(), function(user) {
            return (user.userName() === userName);
        });
        newSelectedUsers.push(selectedUser);
    });
    self.SelectedUsers(newSelectedUsers);
});

self.AllChecked = ko.computed({
    read: function() {
        var firstUnchecked = ko.utils.arrayFirst(dataSource, function(item) {
            return self.selectedUserNames() == false;
        });
        return firstUnchecked == null;
    },
    write: function(value) {
        ko.utils.arrayForEach(dataSource, function(item) {
            self.selectedUserNames(value);
        });
    }
})
}

ko.applyBindings(new UsersViewModel(), document.getElementById('sideB'));

Answer 1

调用 write 时传递给 computed 的值不是用户名，而是指示复选框状态的 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 以使用 indexOf:

检查是否存在第一个未检查的 userName

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

查看已修改Fiddle

剔除，select 个所有复选框并查看 select 个复选框的列表

Knockout, select all checkboxes and view list of select checkboxes

checkbox

list

knockout.js