knockout.js - 计算的或可观察的

Question

我有一个应用程序，它允许我们的客户访问我们的网站，获取报价，然后进行投资回报分析等......

有两个部分......“报价”部分和“回报”部分。

我正在使用淘汰赛来同步字段....因此，当客户进来并说他们需要 10 x 10 单位时，我们给他们报价 4,000 美元。该值作为成本复制到“回报”表中。然后我们扣除节能抵免、投资税收抵免等......得出“净投资”。

只要用户以正确的方式遵循每一步，一切都会正常进行。

现在，如果用户已经大致了解了他们计划在我们的某个单位上花费的金额，会发生什么情况？他们不知道他们需要一个 10x10 的单位，他们只知道他们有 5,000 美元可以投资，并想看看这项投资是否有好的回报。因此，这个示例用户跳过了报价部分，只想输入他们的假设价格并获得一些数字。

我的视图模型是这样设置的：

self.height = ko.observable('<?php echo $height; ?>'),
self.width = ko.observable('<?php echo $width; ?>'),
/* Math simplified to remove gobbeldygook */
self.cost = ko.computed(function () {return (self.height() * self.width()) * 40;}),

如何设置“成本”，以便在提供高度和宽度时自动计算，但也可以通过 UI 进行编辑和更改？

非常感谢您的帮助。

Answer 1

Knockout 使用可写的计算 observable 让这一切变得简单。您可以提供一个读取函数，该函数在用户访问它时返回该值，就像您已经拥有的一样，但还提供了在值写入时发生的逻辑。

根据您的设置，您似乎希望计算成本的写入部分以设置适当的高度和宽度值。

self.cost = ko.computed({
    read: function () { return (this.height() * this.width()) * 40; },
    write: function(value) { /* your logic here to set height and width */ },
    owner: self
});

full docs are here，降约30%：