Question

我有一个数据/号码重的应用程序，我正在使用KnockoutJS构建。在我当前的屏幕上，我有一个表格，每个单元格都包含一个标签和输入。这些值是从一个可观察的数组中提取的，如下所示：

[
   {
      label: "some label text",
      value: 100
   }
]

这是我的观点：

<table data-bind="foreach: dosage">
    <tr>
        <td><label data-bind="text: label"></td>
        <td><input data-bind="percentage: value, number: value"></td>
    </tr>
</table>

有6个对象，我希望能够计算第二个表列中显示的所有value的总和。（他们都需要总共100个。）

我仍然围绕着Knockout，所以我不确定解决这个问题的最佳做法是什么？

Answer 1

您的示例代码存在一些问题，导致难以直接回答您的问题。这包括：

两个未内置的绑定（percentage和number）。
数据（只有一个元素的数组），但没有视图模型代码。
显然，你将input绑定到“值”，但是没有视图模型代码，很难看出它是如何工作的（你需要双向绑定的observable）。
没有根视图模型的代码。

如果我稍微改变你的代码并作出一些假设，我会得到以下结论：

var data = [
   {
      label: "some label text",
      value: 100
   }, 
   {
      label: "some label text",
      value: 100
   }
];

var ViewModel = function(dosages) {
    var self = this;
    self.dosage = ko.observableArray(dosages);
    self.totalValue = ko.computed(function() {
        return self.dosage().reduce(function(a,b) { return a.value + b.value; });
    });
};

ko.applyBindings(new ViewModel(data));

value属性仍然无法观察（因此输入什么都不做），但我想这就是问题的重点。

如您所见，上面的代码在根视图模型上有totalValue computed observable。这是关于如何创建总数的建议。

以下标记符合上述视图模型代码：

<table>
    <tbody data-bind="foreach: dosage">
    <tr>
        <td><label data-bind="text: label" /></td>
        <td><input data-bind="value: value" /></td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td><span data-bind="text: totalValue" /></td>
        </tr>
    </tfoot>
</table>

您可以查看this fiddle是否有工作演示。如果您将数据对象的值属性更改为其他数字并重新运行小提琴，您将看到不同的总数。如果您更改并创建具有可观察属性的真实视图模型，则input中的双向绑定也将开始工作，并且总计将动态更新。

这应该让你开始/回答你的基本问题。

计算显示可观察数组中元素的总和

1 个答案: