2

我有一个视图模型

function ViewModel() {
    this.applications = ko.observable(10);
    this.applicationsText_computed = ko.computed(function () {
        return "You have " + this.applications() + " applications";
    });
    this.applicationsText_classinc = function () {
        return "You have " + this.applications() + " applications";
    };
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);


<p data-bind="text: applicationsText_computed()"></p>
<p data-bind="text: applicationsText_classic()"></p>

applications当我更改可观察时，这两个段落都会更改文本。

那么，使用 ako.computed和 classinc 函数有什么区别呢？

4

2 回答 2

7

经典函数在其依赖的 observables 发生变化时不会被执行，但只有在它被独占调用时，另一方面，只要它可能使用的任何 observable 属性发生变化，计算函数就会被执行。

您查看当前有 () 对您的绑定和执行调用。这会将属性变成只准备好的。当您指定计算时，对于发生双向绑定，您应该编写：

text: applicationsText_computed

如果你有一个用于 firstName 的 observable 和另一个用于 lastName 的 observable，并且你想显示全名怎么办？这就是计算出的 observables 的用武之地——这些函数依赖于一个或多个其他 observables，并且会在这些依赖项中的任何一个发生变化时自动更新。

于 2013-04-29T08:44:19.307 回答
2

是的，两个段落都在变化时applications发生变化。这是由于隐式计算的 observable，它是由敲除创建的。它类似于在您的 html 标记中编写：
<p data-bind="text: 'You have ' + applications() + ' applications'"></p>
在所有三种情况下，敲除创建计算的 observable 并跟踪它依赖于 observable applications。因此，您的“计算”和“经典函数”都会导致隐式计算可观察。正如 XGreen 所指出的，使用计算的正确方法是text: applicationsText_computed.

所以在这个简单的例子中，你可以使用“经典函数”。对我来说，如果它是唯一的地方，那么用 html 标记编写它会更简单。但有两点很重要。第一个，正如我所说，无论如何计算的 observable 是显式或隐式创建的。第二个是计算出的 observable 有更多的功能。例如，您可以在代码中明确订阅它：applicationsText_computed.subscribe(function(newValue) {...}).
此外，您可以使用显式读写访问器创建 observable。检查文档以了解其他内容。所以计算出的 observable 与函数完全不同。

于 2013-04-29T09:34:26.320 回答