[英]Knockout.js - How to uncheck available item observable when clicking selected item
The selection is made when the elements in the top list are clicked. 单击顶部列表中的元素时进行选择。 When you click on the bottom elements, it is deleted from the list.
单击底部元素时,将从列表中删除它。 However, the checkbox on the top list was not false.
但是,顶部列表中的复选框不是false。 How can I fix it.
我该如何解决呢?
function User(data) { this.userName = ko.observable(data.userName); this.selected = ko.observable(data.selected); } var dataSource = [ new User({ userName: "test1", selected: false }), new User({ userName: "test2", selected: false }) ]; function UsersViewModel() { var self = this; //initial data may have two IEnumerables self.AllUsers = ko.observableArray(dataSource); self.SelectedUsers = ko.observableArray([]); self.selectedUserNames = ko.observableArray([]); remove: function myfunction() { SelectedUsers().remove(this); } 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.remove = function(e) { self.SelectedUsers.remove(e); } } ko.applyBindings(new UsersViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Available <ul data-bind="foreach: AllUsers, visible: AllUsers().length > 0"> <li> <!--<div data-bind="click: $parent.SelectedUser">--> <input type="checkbox" name="checkedUser" data-bind="value: userName, checked: $root.selectedUserNames" /> <span data-bind="text: userName"></span> <!--</div>--> </li> </ul> <br />Selected <ul data-bind="foreach: SelectedUsers, visible: SelectedUsers().length > 0"> <li data-bind="click: $parent.remove"> <span data-bind="text: userName"></span> </li> </ul>
I haven't used Knockout.js in a while, but it looks like your problem is that the remove()
method is removing users from the SelectedUsers
observable, when you should actually be removing user names from the selectedUserNames
observable instead. 我有一段时间没有使用Knockout.js,但看起来你的问题是
remove()
方法正在从SelectedUsers
observable中删除用户,而实际上你应该从selectedUserNames
observable中删除用户名。
Based on the way you have the binding set up, you are subscribing to the selectedUserNames
observable and updating the SelectedUsers
observable within this subscription. 根据您设置绑定的方式,您可以订阅
selectedUserNames
observable并更新此订阅中的SelectedUsers
observable。 That means that the subscription wasn't being called when you were removing users from the SelectedUsers
observable, which explains why you weren't seeing the corresponding user get unchecked when removing a username. 这意味着当您从
SelectedUsers
observable中删除用户时未调用订阅,这解释了为什么在删除用户名时没有看到相应的用户未选中。
In other words, change the following method: 换句话说,更改以下方法:
self.remove = function(e) {
self.SelectedUsers.remove(e);
}
to this instead: 相反:
self.remove = function(e) {
self.selectedUserNames.remove(e.userName());
}
Here is an updated example with your full code: 以下是包含完整代码的更新示例:
function User(data) { this.userName = ko.observable(data.userName); this.selected = ko.observable(data.selected); } var dataSource = [ new User({ userName: "test1", selected: false }), new User({ userName: "test2", selected: false }) ]; function UsersViewModel() { var self = this; //initial data may have two IEnumerables 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.remove = function(e) { self.selectedUserNames.remove(e.userName()); } } ko.applyBindings(new UsersViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Available <ul data-bind="foreach: AllUsers, visible: AllUsers().length > 0"> <li> <!--<div data-bind="click: $parent.SelectedUser">--> <input type="checkbox" name="checkedUser" data-bind="value: userName, checked: $root.selectedUserNames" /> <span data-bind="text: userName"></span> <!--</div>--> </li> </ul> <br />Selected <ul data-bind="foreach: SelectedUsers, visible: SelectedUsers().length > 0"> <li data-bind="click: $parent.remove"> <span data-bind="text: userName"></span> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.