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。在视图模型中将总和作为计算的可观察对象并绑定到它。

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

// 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来演示。

KnockoutJS更新行和字段

1 个答案: