knockout.js - 淘汰赛计算数组不更新

Question

我面临一个问题，即添加新项目时计算的可观察数组未更新。

self.FilteredCityList = ko.computed(function() {
  var filteredCollection = ko.utils.arrayFilter(self.CityListCollection(), function(r) {
    var matchingItem = ko.utils.arrayFilter(self.LocationCollection(), function(r1) {
      return r1.LocationCode() == r.LocationCode();
    });
    if (matchingItem.length > 0) {
     return false;
    }
    return true;
  });
  return filteredCollection;
}, this);

当我在self.LocationCollection()计算数组中添加一个项目时，不会更新。

Answer 1

您在评论中提到您已使用以下代码向您添加LocationCollection导致问题的项目：

self.LocationCollection().push(item);

在哪里

self.LocationCollection = ko.observableArray();

push要启用淘汰赛的更改跟踪，您需要observableArray直接调用（例如不带括号()），如文档中所述：

self.LocationCollection.push(item);

但是有什么区别呢？

该ko.observableArray()调用将返回一个函数。要获取底层数组，您需要调用此函数（例如self.LocationCollection()）返回存储的数组。

此时，当您调用时，LocationCollection().push(item)您将调用push底层数组，因此淘汰赛不会知道它，也不会触发您计算的 observable。

这就是为什么在淘汰赛中他们定义了自己的push方法，observableArray你需要用语法调用什么LocationCollection.push(item)，因为它是淘汰赛的方法，它会正确地跟踪变化。

样品小提琴。