如何返回两个计算的 observable 的总和？答案

【问题标题】：How to return the sum of two computed observable?如何返回两个计算的 observable 的总和？
【发布时间】：2015-06-20 20:18:39
【问题描述】：

我对 KnockoutJS 不是很熟悉，但我正在尝试获取两个计算的 observable 的总和并将其绑定到一个表：

我有这个：

var cost = ko.computed(function () {
        total = 0;

        ko.utils.arrayForEach(claimTreatments(), function (item) {
            total += item.Cost;
        })
        return total;
    });

还有，

 var amount = ko.computed(function () {
        total = 0;

        ko.utils.arrayForEach(claimDrugs(), function (item) {
            total += item.Drugcost;
        })
        return total;
    });

我正在尝试这样的事情，但没有工作。

var totalamount = ko.computed(function () {
        total = cost() + amount();
        return total;
    });

这也是我试图将其绑定到的表的图片（金额字段），以便清楚地了解场景

任何帮助将不胜感激！

【问题讨论】：

你能提供 JSFiddle 来显示这个问题吗？

标签： knockout.js

【解决方案1】：

在这里使用 self 进行小修复就可以解决问题。如果你想将它绑定到 view 。 var 对 viewModel 来说非常本地化，视图并不能完全识别它。

视图模型：

var claimDrugs = [{'Drugcost':10},{'Drugcost':10},{'Drugcost':10}
]

claimTreatments  = [{'Cost':10},{'Cost':10},{'Cost':10}
]

var ViewModel = function() {
var self=this;    
self.cost = ko.computed(function () {
        total = 0;

        ko.utils.arrayForEach(claimTreatments, function (item) {
            total += item.Cost;
        })
        return total;
    });

   self.amount = ko.computed(function () {
        total = 0;
        ko.utils.arrayForEach(claimDrugs, function (item) {
            total += item.Drugcost;
        })
        return total;
    });

    self.totalamount = ko.computed(function () {
        total = self.cost() + self.amount();
        return total;
    });
};

ko.applyBindings(new ViewModel()); // This makes Knockout get to work

查看：

<div >   
    <p> <label data-bind='text: cost' ></label></p> 
    <p> <label data-bind='text: amount' ></label></p> 
    <h2><label data-bind='text: totalamount'> </label></h2>  
</div>

工作小提琴here

PS： 是的，您确实可以按照您的方式添加两个计算方式，但绑定到您使用上述方法的视图。

【讨论】：

感谢@supercool！快速提问，为什么 (var) 不工作？我在我的代码中使用了一堆，它们工作得很好！
var 可以很好地添加计算但在视图中显示它不会帮助它。检查上述编辑

【解决方案2】：

如果您使用 Knockout >= 3.2.0，您还应该考虑使用 pureComputed 而不是 Computed。

【讨论】：