Question

所以我现在拥有这个复杂的应用程序，其中一部分动态创建一个表，包含未知数量的标题。为了实现这一点，我只是将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对象将具有{ {1}}。

这一切都很好用。但是我希望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>: <span data-bind="text: $parent.totals()[$data]"></span></div> </div>）时，这些工作就变得很好了。但是当添加后续项目时，会添加HTML绑定，从而显示重复的标题和值，而不是重写整个批次。因此，添加两个项目后的输出将是：

ko.observableArray()

第二组Header 1: value Header 2: value Header 3: value Header 1: value Header 2: value Header 3: value显示新的更新值。

我是否必须将HTML包装在另一个绑定中？我不知道该怎么做。

我会做一个小提琴，但它非常复杂，会永远带我。

Answer 1

因此，根据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)检查该项是否不存在，如果是，则添加它。

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

1 个答案: