javascript - 记录未按时加载以计算组件中的属性？

Question

组件:

{{foods-table foods=model}}

从外部范围接收食物属性。

该组件有一个计算属性:

saturatedSum: function() {

var sum = this.get('foods').reduce(function(previousValue, food, index){
    return previousValue + food.get("saturated");
}, 0);

return sum;

}.property('foods.@each')  //key @each instructs to update bindings

我使用这个组件两次，一次在 Meal route ，一次在 Meal.findFood route 。 第一个组件实例将 {{saturatedSum}} 呈现为 NAN，第二个组件给出适当的数值和。

我假设与从外部作用域传递的属性关联的记录在缩减之前未完全加载(this.get('foods').get('length') 将返回 4，但是 this.get('foods').objectAt(0).get('saturated') 将是未定义的。

处理这个问题的优雅方法是什么？

Answer 1

我会选择:

saturatedSum: 0

_updateSaturatedSum: ->
  @setProperty 'saturatedSum', 0
  @get('foods').then (foods) =>
    foods.forEach (food) =>
      food.then (loadedFood) =>
        @incrementProperty 'saturatedSum', loadedFood.get('saturated')

updateSaturatedSum: (->
  Em.run.throttle @, '_updateSaturatedSum', 500
).observes('foods.@each').on('init')