KnockoutJS 更新行总和字段

Question

我不知道如何使用 knockoutJS 更新 foreach 模板中的行总和

    <div id="timeEntryList" data-bind="foreach: timeEntries">
        <table >
            <tr>
                ...

                <td>  //there are more of this, not included here
 <input type="number" 
    data-bind="value: Days[6].Hours, 
               event: { change: $root.setDirty }" />

                </td>
                <td> //this part needs to be updated when the above input is changed
                    <span data-bind="text: $root.sumRow($data)">
                    </span>
                </td>

最后一个 TD 包含一个 span 元素，它显示 foreach 中当前项目报告的小时总和。 它在加载数据时正确显示，但在我编辑元素时保持陈旧。 如何在更改输入框的值时更新此元素？

这是我的视图模型非常精简的版本：

var TimeReportModel = function (init) {
    this.timeEntries = ko.observableArray(init.TimeEntries);

    //... helper functions
};

TimeEntries 是表示每周报告的小时数的对象。 所以它包含一个天数组，每一天都有一个小时属性。

Answer 1

根据您要绑定的内容，您似乎正在绑定到常规函数的结果。如果你想在有变化时看到更新的值，你需要绑定到一个 observable。在您的视图模型中使总和成为计算的 observable 并绑定到它。

我不知道您的视图模型是什么样的，或者您要添加什么，但它看起来像这样：

// calculate the sum of the hours for each of the days
self.totalDays = ko.computed(function () {
    var sum = 0;
    ko.utils.arrayForEach(self.days(), function (day) {
        sum += Number(day.hours());
    });
    return sum;
});

这里有一个fiddle 来演示。