Knockout.js - 单击选定项目时如何取消选中可观察的可用项目答案

【问题标题】：Knockout.js - How to uncheck available item observable when clicking selected itemKnockout.js - 单击选定项目时如何取消选中可观察的可用项目
【发布时间】：2017-06-29 12:22:21
【问题描述】：

当点击顶部列表中的元素时进行选择。当您单击底部元素时，它会从列表中删除。但是，顶部列表上的复选框不是错误的。我该如何解决它。

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>

【问题讨论】：

下面的答案是否解决了问题？

标签： javascript ajax arraylist knockout.js

【解决方案1】：

我有一段时间没有使用 Knockout.js，但您的问题似乎是 remove() 方法正在从 SelectedUsers 可观察对象中删除用户，而您实际上应该从 @987654323 中删除用户名@observable 代替。

根据您设置绑定的方式，您将订阅 selectedUserNames observable 并在此订阅中更新 SelectedUsers observable。这意味着当您从 SelectedUsers observable 中删除用户时没有调用订阅，这解释了为什么在删除用户名时没有看到相应的用户未选中。

也就是说，改变如下方法：

self.remove = function(e) {
  self.SelectedUsers.remove(e);
}

改为：

self.remove = function(e) {
  self.selectedUserNames.remove(e.userName());
}

这是一个包含完整代码的更新示例：

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>

【讨论】：