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

【问题标题】：How do I display the sum of multiple properties in Ractive如何在 Ractive 中显示多个属性的总和
【发布时间】：2015-04-08 08:20:09
【问题描述】：

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

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

如何在我的模板中显示项目大小的总和？这取决于每个单独项目的大小，还取决于项目数组（例如，添加/删除项目）。

【问题讨论】：

标签： javascript data-binding ractivejs

【解决方案1】：

这是一个fiddle，它通过使用 Ractive 的computed properties 来实现您想要的。你会考虑这种数据的非规范化吗？

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

【讨论】：

【解决方案2】：

您可以使用观察者跟踪总和。这样做的好处是不必在每次值更改时重复整个数组。（见http://jsfiddle.net/tL8ofLtj/）：

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

【讨论】：

【解决方案3】：

我找到了一种解决方案，但它不是最优的，因为它使视图中的数据非规范化。

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}}

【讨论】：

使用这种方法，观察者将在初始渲染时触发 n + 1 次，这意味着在您的示例中，即使数据没有改变，它也会计算 4 次。