为什么子视图模型中的函数会导致父视图模型中的函数触发? [英] Why does a function in a child view model causes a function in the parent view model to fire?

问题描述

这是此一个:

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

正如对链接问题的回答所解释的那样，我认为只有当 func 本来是 computed 时才会发生这种情况(因为它的值在任何它所依赖的 observables 已更改)，但我现在看到它发生在一个简单的函数中.

为什么?

var MasterViewModel = function () {var self = this;self.nested = new FirstViewModel();self.func = function() {var items = self.nested.array();警报(执行")；};}var FirstViewModel = 函数 () {var self = this;self.array = ko.observableArray([]);self.push = 函数 () {self.array.push(new SecondViewModel());警报(推送")；}}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>

解决方案

KO 使用 observables(如您所知).当您为绑定值提供 表达式 而不仅仅是对 observable 的引用时，KO 在应用绑定时有效地将该表达式包装在计算中.所以这个:

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

...实际上与此相同:

<div data-bind="value: 计算"></div>

...KO 在幕后创建 computed 的地方是这样的:

computed = ko.pureComputed(function() {返回函数()；});

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

This is a follow-up question to this one:

On the following code, func is a simple function that's bounded to a parent div. Naturally, it fires when document loads, but it also fires when the button is pressed.

As explained on the answer to the linked question, I thought this can happen only if func would have been a computed (since it's value is recomputed whenever any of the observables it depends on is changed), but I now see it happens with a simple function.

Why?

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>

解决方案

KO works with observables (as you know). When you provide an expression for a binding value rather than just a reference to an observable, KO effectively wraps that expression in a computed when applying the bindings. So this:

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

...is effectively the same as this:

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

...where KO is creating computed behind the scenes something like this:

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

And since func uses the value of the observable self.nested.array, KO's change tracking sees and remembers that fact when it computes the computed's value, so it knows to recompute the computed when self.nested.array changes.

这篇关于为什么子视图模型中的函数会导致父视图模型中的函数触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！