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

record not loaded on time to compute property in a component?

本文关键字：计算 属性 组件 加载 记录      更新时间：2023-09-26

>组件：

{{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.findFood 路线中。第一个组件实例将 {{饱和总和}} 呈现为 NAN，第二个组件提供适当的数字总和。

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

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

我会选择：

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')

@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
相关文章：