knockout.js - 计算或可观察

时间:2013-06-05 17:04:37

标签: javascript knockout.js

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

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

我正在使用淘汰赛来同步字段....所以当客户进来并说他们需要一个10 x 10的单位时,我们引用他们4,000美元。此值将作为“成本”复制到“回收”工作表。然后,我们扣除节能信贷,投资税收抵免等...提出“净投资”。

只要用户以正确的方式遵循每一步,一切都会有效。

现在,如果用户已经对他们计划在我们的某个单位上花费的内容进行了大肆宣传,会发生什么?他们不知道他们需要一个10x10的单位,他们只知道他们有5000美元的投资,并想看看这笔投资是否有很好的回报。因此,此示例用户跳过报价部分,只想输入他们的假定价格并获得一些数字。

我的视图模型因此设置:

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;}),

如何设置“费用”,以便在提供高度和宽度时自动计算,但也可以通过用户界面进行编辑和更改?

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:3)

Knockout使用可写的计算可观察量使这变得容易。您可以提供一个读取函数,该函数在用户访问时返回值,就像您已经拥有的那样,但也提供了在写入值时发生的逻辑。

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

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%: