Как отобразить сумму нескольких свойств в Ractive

Question

Я использую RactiveJS для своих шаблонов. У меня есть несколько вложенных данных, как это:

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

Как я могу отобразить сумму размеров элементов в шаблоне? Это зависит от размера каждого отдельного элемента, а также от массива элементов (например, элементы добавляются/удаляются).

Answer 1

Вот это fiddle, которая добивается того, чего вы хотите с помощью теля Тяговая-х computed properties. Вы считаете эту денормализацию данных?

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

Answer 2

Я нашел одно решение, но оно не является оптимальным, поскольку оно денормализует данные в представлении.

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

Answer 3

Вы можете отслеживать сумму, используя наблюдателя. Это имеет то преимущество, что вам не нужно повторять весь массив каждый раз при изменении значения. (См http://jsfiddle.net/tL8ofLtj/):

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