knockout.js - knockout 计算阵列不更新

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

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() 中添加一个项目时，计算出的数组不会更新。

最佳答案

您在评论中提到您使用以下代码将项目添加到您的 LocationCollection 中，这导致了您的问题:

self.LocationCollection().push(item);

在哪里

self.LocationCollection = ko.observableArray();

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

self.LocationCollection.push(item);

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

此时，当您调用 LocationCollection().push(item) 时，您将在底层数组上调用 push，因此 knockout 不会知道它，也不会触发您计算出的可观察对象。

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

Sample fiddle.

关于knockout.js - knockout 计算阵列不更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13662573/