Knockout计算的可观察对象的单独绑定不刷新

Knockout computed observable object individual bindings not refreshing

本文关键字：绑定 单独 刷新 观察 计算 Knockout 对象      更新时间：2023-09-26

所以我现在有这个复杂的应用程序，其中一部分它动态创建一个表，具有未知数量的标题。为了实现这一点，我只需将JavaScript对象视为字典，如果键不存在，则添加:

function getHeaders (objs) {
    var headers = {};
    $.each(objs, function(i, el) {
        for (var key in el) {
            if (headers[key] === undefined)
                headers[key]=key;
        }
    });
    return headers;
}

因此，这将创建一个包含最大数量头的头列表。因此，例如，如果一个对象只包含标题header 1和header 2，但第二个对象具有所有这些标题和一个header 3，那么创建的headers对象将具有header 1-3。

这一切都工作得很好。但是我想要一个computed来显示标题下每个值的摘要，所以我这样做:

self.totals = ko.computed(function () {
    var vals = {keys:[]};
    $.each(self.itemList(), function (i, el) {
        for (var key in el){
            if (el[key] instanceof nutCalcModel){
                if (vals[key] === undefined) vals[key] = 0;
                    vals[key] += el[key].total;
                    vals.keys.push(key);
                }
            }
    });
    console.log(vals);
    return vals;
});

，这工作得很好，给出了每个标题的总数。我的绑定是这样的(尽管是骨架):

<div class="well" data-bind="foreach: totals().keys">
    <div><b data-bind="text: $data"></b>:&nbsp;<span data-bind="text: $parent.totals()[$data]"></span></div>
</div>

现在，当第一个项目被添加到表(ko.observableArray())时，这些工作很好。但是当添加后续项时，会添加HTML绑定，从而显示重复的标头和值，而不是重写整个批。因此，添加两项后的输出将是:

Header 1: value
Header 2: value
Header 3: value
Header 1: value
Header 2: value
Header 3: value

其中第二组Header 1-3显示了新更新的值。

我必须在另一个绑定或其他东西中包装HTML吗?我不知道该怎么办。

我会拉小提琴，但它很复杂，要花我很长时间。

所以根据Robert Westerlund对OP的评论，他指出我会添加重复的键。所以我修改了代码，它工作，完美:)

代码如下:

self.totals = ko.computed(function () {
    var vals = {keys:[]};
    $.each(self.itemList(), function (i, el) {
        for (var key in el){
            if (el[key] instanceof nutCalcModel){
                if (vals[key] === undefined) vals[key] = 0;
                vals[key] += el[key].total;
                if (vals.keys.indexOf(key) === -1)
                    vals.keys.push(key);
            }
        }
    });
    console.log(vals);
    return vals;
});

if (vals.keys.indexOf(key) === -1)行检查条目是否存在，如果存在则添加。

相关文章：