KnockoutJS 可观察数组与计算的可观察对象

Question

我有一个 JSON 数组、两个列表（由计算的 observable 填充）和一个选定项数组（JSON 数组中项的 ID）。

所选项目保存在 observableArray 中，我希望一个列表填充数组中的项目，另一个列表填充所有不在数组中的项目。

这在初始化时效果很好，但是如果我尝试将项目添加到选定的项目数组中，则更改不会反映在 UI 或两个列表数组中。

https://jsfiddle.net/mnbu21z4/3/

var witnessJSON = [
    {"id":3,"name":"Bob3"},
    {"id":2,"name":"Bob2"},
    {"id":1,"name":"Bob1"}
];

var viewModel = function() {
  self = this;

  self.witnessArray = ko.observableArray([1]);

  self.witnessesAdded = ko.computed(function() {
    return ko.utils.arrayFilter(witnessJSON, function(witness) {
      return self.witnessArray().indexOf(witness.id) > -1;
    });
  });

  self.witnessesPool = ko.computed(function() {
    return ko.utils.arrayFilter(witnessJSON, function(witness) {
      return self.witnessArray().indexOf(witness.id) == -1;
    });
  });
}

myViewModel = new viewModel();
ko.applyBindings(myViewModel);

viewModel.witnessArray.push(2);

有人能指出正确的方向吗？

Answer 1

您的示例中的myViewModel 似乎拼写错误。

改变这个：

myViewModel = new viewModel();
ko.applyBindings(myViewModel);

viewModel.witnessArray.push(2);

到这里：

var myViewModel = new viewModel();
ko.applyBindings(myViewModel);

myViewModel.witnessArray.push(2);

然后您的小提琴示例将起作用。我已经进行了这些更改并更新了您的 fiddle，它可以正常工作。

您可能想查看 knockout projections 插件，它可以让您以更有效的方式实现相同的目标。看看这个SO answer