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

我正在使用这个组件两次，一次在用餐路线和一次用餐。查找食物路线。 第一个组件实例将{{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')

Answer 2

来自@Daniel的解决方案指出了我正确的方向：

在计算函数上使用property('foods@each')方法已经提供了更新的绑定。但这种约束力集中在foods@each上（例如，只有在食物数量发生变化时才会触发观察者。

我们想要的是了解导致饱和属性发生变化的变化。

因此，最优雅的解决方案似乎是将property('foods@each')更改为property('foods@each.saturated')：

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

    return sum;
}.property('foods.@each.saturated')  //key @each instructs to update bindings

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

2 个答案: