为什么子视图模型中的函数会导致父视图模型中的函数触发？答案

【问题标题】：Why does a function in a child view model causes a function in the parent view model to fire?为什么子视图模型中的函数会导致父视图模型中的函数触发？
【发布时间】：2018-02-18 19:02:02
【问题描述】：

这是one的后续问题：

在以下代码中，func 是一个绑定到父 div 的简单函数。自然，它会在文档加载时触发，但也会在按下按钮时触发。

正如对链接问题的回答所解释的那样，我认为只有当 func 是 computed 时才会发生这种情况（因为只要它所依赖的任何可观察值发生变化，就会重新计算它的值），但我现在看到它发生在一个简单的功能上。

为什么？

var MasterViewModel = function () {
  var self = this;
  self.nested = new FirstViewModel();
  self.func = function() {
    var items = self.nested.array();
    alert("executed");
  };
}
var FirstViewModel = function () {
  var self = this;
  self.array = ko.observableArray([]);
  self.push = function () {
    self.array.push(new SecondViewModel());
    alert("pushed");
  }
}

var SecondViewModel = function () {
  var self = this;
  self.z = ko.observable();
}

var mvm = new MasterViewModel();
ko.applyBindings(mvm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <div data-bind="value: func()">
     <div data-bind="with: nested">
       <button data-bind="text: 'push me', click: push"></button>
     </div>
  </div>

【问题讨论】：

第一件事看起来不对 - 你在这里调用执行 <div data-bind="value: func()">
@DanilGholtsman，有什么问题？
它不会导致第一个带有“已执行”消息的警报吗？如果这是预期的行为，我很抱歉让您感到困惑
@DanilGholtsman，确实如此，但确实在意料之中。我没想到的是按下按钮时的呼叫。

标签： javascript knockout.js

【解决方案1】：

KO 与 observables 一起工作（如您所知）。当您为绑定值提供 表达式 而不仅仅是对可观察对象的引用时，KO 在应用绑定时有效地将该表达式包装在计算中。所以这个：

<div data-bind="value: func()"></div>

...实际上与此相同：

<div data-bind="value: computed"></div>

...KO 在幕后创建computed，如下所示：

computed = ko.pureComputed(function() {
    return func();
});

由于func 使用可观察的self.nested.array 的值，KO 的更改跟踪在计算计算值时会看到并记住这一事实，因此它知道在self.nested.array 更改时重新计算计算值。

【讨论】：

如果您可以查看this 后续问题，那就太好了。