淘汰赛计算数组不更新答案

【问题标题】：Knockout computed array not updating淘汰赛计算数组不更新
【发布时间】：2012-12-01 18:49:18
【问题描述】：

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

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

【问题讨论】：

您的代码似乎工作得很好：jsfiddle.net/nemesv/egFSh 在向LocationCollection 添加项目时会更新FilteredCityList。您能否整理一个示例 jsfiddle 来演示您的问题？
谢谢老兄。它现在工作。我使用 self.LocationCollection().push(item) 添加了一个项目。现在看到你的之后，我改成了 self.LocationCollection.push(item)。你能告诉我我有什么问题吗？

标签： knockout.js

【解决方案1】：

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

self.LocationCollection().push(item);

在哪里

self.LocationCollection = ko.observableArray();

要启用淘汰赛的更改跟踪，您需要直接在observableArray 上调用push（例如，不带括号()）as described in the documentation：

self.LocationCollection.push(item);

但是有什么区别呢？

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

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

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

Sample fiddle.

【讨论】：

+1 - 感谢您帮助确定真正问题的方式，这在他最初的描述中并没有直接体现。