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

时间:2014-06-28 23:16:48

标签: javascript jquery html knockout.js

所以我现在拥有这个复杂的应用程序,其中一部分动态创建一个表,包含未知数量的标题。为了实现这一点,我只是将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 1header 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>:&nbsp;<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包装在另一个绑定中?我不知道该怎么做。

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

1 个答案:

答案 0 :(得分:0)

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