成员计算属性在受抚养属性更改时不会更新

Question

我是新来的ember.js，为了学习，我正在尝试构建一个简单的应用程序在烬。这个应用程序是一个简单的卡路里计数器，可以跟踪每一餐(不用考虑餐名，我是用假名字为模拟数据生成随机名称)，

​

列表底部有一个输入组件(food-input餐3)，您输入名称并点击enter，它会添加新餐，成员更新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，因此当模型更改时，属性应该更新，但它不是那样工作的。我是很新的成员，所以我不知道我错过了什么，所以请帮助。

Answer 1

当数组的成员更改时，您需要计算属性，而不是数组本身(即完全交换掉)。将.[]添加到依赖键的末尾以完成此操作。

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