knockout.js - 计算项何时重新计算依赖项？

Question

假设你有以下js：

  var vm = {
    objects: ko.observable([]),
    objectCount: ko.computed(function(){
      return vm && vm.objects().length;
    }),

    add: function() {
      var current = vm.objects();
      current.push({});      
      console.log('current is', current);
      vm.objects(current);
      console.log("should recalculate here", vm.objectCount());
    }
  };

还有下面的html：

  <ul data-bind="foreach: objects">
    <li>
      Object: <span data-bind="text: $index"></span>
    </li>
  </ul>
  <button data-bind="click: add">Add Object</button>
  <p>
    Total number of objects:
    <span data-bind="text: objectCount"></span>
  </p>

我的理解from reading the documentation 是因为在我添加一个对象后我调用了 objectCount()，它应该重新计算它的依赖关系。相反，它似乎甚至从未执行过该函数，只运行一次！

JSBin demonstrating a simplified version of my issue.

Answer 1

在定义你的 viewModel 之后定义你的计算 - http://jsbin.com/welcome/58760/ - 这是因为计算的 observables 的工作方式（来自 ko docs）。

1. 每当您声明一个计算的 observable 时，KO 立即调用 它的求值函数来获取它的初始值。
2. 当您的评估功能运行时，KO 会记录任何 您的评估者读取的可观察的（或计算的可观察的） 的价值。
3. 当您的评估员完成后，KO 会为每个 你接触过的 observables（或计算出的 observables）。
   订阅回调设置为使您的评估器再次运行，
   将整个过程循环回第 1 步（处理任何旧的
   不再适用的订阅）。
4. KO 通知所有订阅者您计算的新值 可观察到。

在 vm 对象中实例化 observable 时，其他属性还不存在。

Answer 2

这只是一个范围界定问题。如果您将脚本代码重构为如下所示：

$(function(){
  var vm = function(){
    var self = this;

    self.objects = ko.observable([]);
    self.objectCount = ko.computed(function(){
      return self.objects().length;
    });

    self.add = function() {
      var current = self.objects();
      current.push({});      
      console.log('current is', current);
      self.objects(current);
      console.log("should recalculate here", self.objectCount());
    };
  };

  ko.applyBindings(new vm());
});

然后确定正确的变量范围，并且 Knockout 会正确计算依赖关系。正如guigouz 所说，最初调用ko.computed 时，vm 是未定义的，因此它无法设置任何更改处理程序。

这里是the updated JSBin

Answer 3

另一种方法是为ko.computed 使用deferEvaluation 选项。这将告诉 Knockout 等待计算计算的 observable 直到它第一次使用。到那时，vm 将被定义。

objectCount: ko.computed(function(){
  return vm && vm.objects().length;
}, null, { deferEvaluation: true }),