knockout.js - knockout 计算数组不更新

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();

要启用 knockout 的更改跟踪，您需要调用 push在 observableArray直接(例如，不带括号 () ) as described in the documentation :

self.LocationCollection.push(item);

但是有什么区别呢？
ko.observableArray() call 将返回一个函数。要获取底层数组，您需要调用此函数(例如 self.LocationCollection() )，它会返回存储的数组。

此时当您调用 LocationCollection().push(item)您将调用 push在底层数组上，所以 knockout 不会知道它，它不会触发你计算的 observable。

这就是为什么在 knockout 中他们定义了自己的 push observableArray 上的方法本身就是您需要使用语法 LocationCollection.push(item) 调用的内容并且因为它是 knockout 的方法，它会正确地跟踪变化。

Sample fiddle.