如何在Ractive中显示多个属性的总和

时间:2015-04-08 08:20:09

标签: javascript data-binding ractivejs

我正在使用RactiveJS作为模板。我有一些这样的嵌套数据:

var view = new Ractive({
    data: {
        items: [
            { size: 1 }
            { size: 3 }
            { size: 4 }
        ]
    }
});

如何在模板中显示项目大小的总和?这取决于每个项目的大小,还取决于项目数组(例如,添加/删除项目)。

3 个答案:

答案 0 :(得分:2)

这是一个fiddle,可以通过使用Ractive computed properties来实现您的目标。你会考虑这种数据的非规范化吗?

    computed: {
       sum: function () { 
           var items = this.get( 'items' ); 
           return items.reduce(function(prev, current) {
             return prev + current.size;
           }, 0)
       }

答案 1 :(得分:1)

您可以使用观察者跟踪总和。这具有以下优点:每次值改变时不必重复整个阵列。 (见http://jsfiddle.net/tL8ofLtj/):

oninit: function () {
    this.observe('items.*.size', function (newValue, oldValue) {
        this.add('sum', (newValue||0) - (oldValue||0) );
    });
}

答案 2 :(得分:0)

我找到了一个解决方案,但它并不是最佳解决方案,因为它会使视图中的数据非规范化。

var view = new Ractive({
    data: {
        items: [
            { size: 1 }
            { size: 3 }
            { size: 4 }
        ],
        sum: 0
    },
    oninit: function () {
        this.observe('items items.*.size', function () {
            this.set('sum', _.reduce(this.get('items'), function (memo, item) {
                return memo + item.size;
            }, 0));
        });
    }
});

然后在模板中我可以使用{{sum}}