在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 
      ); 
      } 
      } 
    });