当依赖属性更改时，Ember 计算属性不会更新 [重复]答案

【问题标题】：Ember computed property doesn't update when dependent property changes [duplicate]当依赖属性更改时，Ember 计算属性不会更新 [重复]
【发布时间】：2016-03-08 05:45:31
【问题描述】：

我是 ember.js 的新手，为了学习，我正在尝试在 ember 中构建一个简单的应用程序。该应用程序是一个简单的卡路里计数器，可以跟踪每餐（别管餐名，我正在使用 faker 为模拟数据生成随机名称），

列表底部有一个组件（food-inputmeal 3）供输入，您输入名称并按 Enter 键，它会添加新餐点，ember 会更新 DS.RecordArray，因此新餐点将显示在立即列表。

food-input 组件显示餐号取决于列表中的最后一餐，它获取最后一餐的餐号加 1，逻辑在绑定到的计算属性 (newNumber) 中模板中的元素。

这是来自food-input js 文件的代码

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'tr',
  newNumber: Ember.computed('meals', function() {
   console.log('newNumber updated');
   return this.get('meals').get('lastObject').get('number') + 1;
  }),
  actions: {
    addMeal(newMeal) {
      if(newMeal) {
        this.sendAction('action', this.get('newNumber'), newMeal);
      }
      this.set('newMeal', '');
    }
  }
});

这是food-input 模板

<td class="title">meal {{newNumber}} {{input type="text" placeholder="name" value=newMeal enter="addMeal" class="input"}}</td>
<td colspan="6"></td>
<td class="title"></td>

这里是使用food-input的路由模板

<h3>calorie tracking</h3>
{{#food-list}}
  {{#each model as |group|}}
    {{#food-group meal=group deleteMeal="deleteMeal" updateMeal="updateMeal"}}
      {{#each group.foods as |food|}}
        {{food-item title=food.name calorie=food.calorie carbs=food.carbs protein=food.protein fat=food.fat}}
      {{/each}}
    {{/food-group}}
  {{/each}}
  {{food-input action="createMeal" meals=model}}
{{/food-list}}

逻辑很简单，模型（餐单）传入food-input，计算属性newNumber获取最后的餐号加1，属性绑定到模板，所以会自动同步。所以结果是当你添加新餐时food-input的数量会相应增加。

问题是它只在应用程序第一次加载时有效，我可以在应用程序启动时看到console.log('newNumber updated'); 的输出，当我添加新餐时，计算属性永远不会再次运行（我看不到console.log再次输出），因此新餐点和food-input 最终将得到相同的餐点编号。我认为该属性取决于引用模型的meals，因此当模型更改时，属性应该更新，但它不会那样工作。我对 ember 很陌生，所以我不知道我错过了什么，所以请帮忙。

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

当数组的成员发生变化时，您需要重新计算您的计算属性，而不是数组本身（即完全换出）。将.[] 添加到依赖键的末尾以执行此操作。

newNumber: Ember.computed('meals.[]', function() {})

【讨论】：