Ember.js 在EmberJS中,如何通过集合更新来维护子组件状态?

Ember.js 在EmberJS中,如何通过集合更新来维护子组件状态?,ember.js,Ember.js,很简单,有没有通过集合更新来持久化子组件状态的最佳实践。这里有一把小提琴来演示: 1.13 2.4.4 如何切换项目高度、添加新项目以及使现有子项保持其状态?我是否需要编写自定义视图模型管理代码?这在新版本的Ember中解决了吗?您的问题是,每次添加项目时,都会返回一个静态heightToggle属性为false的新数组。如何更改baseItems和newItems的结构,使其实际具有heightToggle属性 baseItems: Ember.A([

很简单,有没有通过集合更新来持久化子组件状态的最佳实践。这里有一把小提琴来演示:

1.13

2.4.4


如何切换项目高度、添加新项目以及使现有子项保持其状态?我是否需要编写自定义视图模型管理代码?这在新版本的Ember中解决了吗?

您的问题是,每次添加项目时,都会返回一个静态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
              );
            }
          }
    });