我有一个带有复选框的列表,当我点击其中一个复选框时,它会显示在SelectedUsers
中,正常工作,复选框data-bind="checked: AllChecked"
也会被选中,但不应该。
<div data-bind="foreach: SelectedUsers">
<p>
<span data-bind="text: userName" ></span>
</p>
</div>
但是,当我使用data-bind="checked: AllChecked"
时,SelectedUsers
中不会显示任何内容,之后,当我单击某个复选框时,列表中的所有项目都被选中,SelectedUsers
中也不会显示任何信息
怎么了?示例: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>
击倒-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'));
调用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