淘汰赛：几个 DOM 元素绑定到同一个 observable

【问题标题】：Knockout: several DOM elements bound to same observable淘汰赛：几个 DOM 元素绑定到同一个 observable
【发布时间】：2013-07-02 20:41:39
【问题描述】：

如何将多个 HTML 输入字段绑定到同一个可观察对象，使可观察对象成为输入字段的总和？（输入字段将只接受数字）

我知道我可以为每个输入字段使用 ko.observable 并使用 ko.computed 来计算输入字段的总和，但是当我将有任意数量的输入字段时，这是如何完成的?

-谢谢:)

【问题讨论】：

“我将有任意数量的输入字段”是什么意思？然后我猜你会有一些项目的集合，所以在你的计算中你可以循环遍历该集合并仍然计算总和......
嗯，我可以通过单击按钮添加更多输入字段，这些新输入字段将成为总和计算的一部分。
你的意思是这样的？ jsfiddle.net/RPhAD
是的，这正是我的意思！ :D 你是个好男人/女人 :)

标签： javascript mvvm knockout.js viewmodel

【解决方案1】：

如果您要拥有任意数量的输入字段，那么您可能会有某种“项目集合”。

让我们将项目称为ItemViewModel，其中它们将有某种value，以及存储它们的集合items，这将是ko.observableArray()

现在您只需要遍历 ko.computed 中的集合并总结集合中项目的 value 属性，因此您需要这样的东西：

var ViewModel = function(){
    var self = this;

    self.items = ko.observableArray([]);

    self.sum = ko.computed(function (){
        var total = 0;
        ko.utils.arrayForEach(self.items(), function(item){
            var value = parseInt(item.value());
            if (!isNaN(value))
                total += value;
        });
        return total;
    });
};

你可以在这里JSFiddle.玩这个

【讨论】：