當依賴屬性發生變化時，Ember計算屬性不會更新

我是ember.js的新手，爲了學習我正在嘗試在燼中構建一個簡單的應用程序。該應用程序是跟蹤每餐一個簡單的卡路里計數器（別提了一頓名字的，我使用的攤販產生的模擬數據隨機的名字），當依賴屬性發生變化時，Ember計算屬性不會更新

有一個組件（food-input餐3）在列表底部輸入，您輸入名稱並按回車鍵，並添加新餐，餘燼更新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，因此當模型更改時屬性應該更新，但它不起作用。我非常新的燼，所以我不知道我錯過了什麼，所以請幫助。

來源

2016-03-08 eric

當數組成員發生更改時，您需要計算屬性進行重新計算，而不是數組本身（即完全換出）。將.[]添加到從屬關鍵字的末尾來執行此操作。

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

來源

2016-03-08 05:48:42

當依賴屬性發生變化時，Ember計算屬性不會更新

回答

相關問題