knockout.js - 普通 javascript 函数和计算函数之间的 knockout 差异

Question

看来我可以用两种方式在我的 View 模型上编写一个函数，结果相同。

普通的javascript函数:

vm.Texts = function () {
  var self = vm;
  if (self.selectedFormat()) {
    return self.selectedFormat().Texts();
  }
};

ko 计算:

vm.Texts = ko.computed(function () {
  var self = vm;
  if (self.selectedFormat()) {
    return self.selectedFormat().Texts();
  }
});

'vm' 是 View 模型，而 selectedFormat 是 View 模型上的 observable。在这两种情况下，当 selectedFormat 更改时，都会触发该函数。所以我的问题是这两种方法有什么区别？

Answer 1

我假设沿着这些方向进行数据绑定(bind):

<span data-bind="text: Texts()"></span>

底线 :
在这两种情况下 text绑定(bind)将创建对 selectedFormat 的依赖。 在初始渲染上。

详情:
您的两种情况都会更新 span因为:

功能案例 . text绑定(bind)将在初始呈现时注意到对 selectedFormat 的依赖。可观察的，因为它在您的函数中被调用。如果 observable 发生变化，它将在 KO 的寄存器中找到该依赖关系并触发 text 上的更新。捆绑。依赖项如下所示:
text binding --> depends-indirectly-on --> selectedFormat
见 this fiddle .

计算案例 .第二种情况可能会起作用，尽管它稍微明显一些，因为 Texts现在依赖于作为selectedFormat 的中介的(计算的)可观察对象。可观察的。现在的依赖是:
text binding --> depends-on --> Texts computed --> depends-on --> selectedFormat
见 this fiddle .