在EmberJS中，如何通過集合更新來維護子組件狀態？

Question

很簡單，是否有通過集合更新來保持子組件狀態的最佳做法。這裏是一個小提琴證明：

1.13 http://emberjs.jsbin.com/jazerepuqe/1/edit?html,js,output

2.4.4 https://ember-twiddle.com/6275ccd28b75c5f24d22c697049f291d?openFiles=components.parent-component.js%2Ctemplates.components.child-component.hbs

我如何可以切換項目的高度，增加一個新項目，並已在現有的兒童保持自己的狀態？我是否需要編寫自定義視圖模型管理代碼？這些東西在新版本的Ember中解決了嗎？

Answer 1

您的問題是，每次添加項目時，都會返回一個靜態heightToggle屬性爲false的新數組。你如何改變baseItems和newItems的結構來實際擁有heightToggle的屬性。

  baseItems: Ember.A([ 
      Ember.Object.create({text: 'red', heightToggled: true}), 
      Ember.Object.create({text: 'blue', heightToggled: true}), 
      Ember.Object.create({text: 'green', heightToggled: true}), 
      ]), 
      items: Ember.computed.map('baseItems', function(item) { 
      return Ember.Object.create({ 
       text: item.text, 
       heightToggled: item.heightToggled 
      }) 
      }), 

      actions: { 
      click() { 
       this.get('items').forEach(childItem => { 
       childItem.toggleProperty('heightToggled');  
       }); 
      }, 
      addItem() { 
       this.get('baseItems').pushObject(Ember.Object.create({ 
       text: 'yellow' + Math.floor(Math.random() * 100000), // Random identifier 
       heightToggled: Boolean(Math.floor(Math.random() * 2))}) // Random booleans 
      ); 
      } 
      } 
    });