在 EmberJS 中，如何通过集合更新来维护子组件状态？答案

【问题标题】：In EmberJS, how do I maintain child component state through collection updates?在 EmberJS 中，如何通过集合更新来维护子组件状态？
【发布时间】：2016-04-15 00:38:05
【问题描述】：

很简单，是否存在通过集合更新来保持子组件状态的最佳实践。这是一个要演示的小提琴：

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 中解决了吗？

【问题讨论】：

标签： ember.js

【解决方案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
              );
            }
          }
    });

【讨论】：