Wie kann ich in EmberJS den Status von untergeordneten Komponenten durch Sammlungsaktualisierungen verwalten?

Question

Ganz einfach, gibt es eine Best Practice für das Fortbestehen des Child-Komponentenstatus durch Sammlungsaktualisierungen. Hier ist eine Geige zu demonstrieren:

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

Wie kann ich Artikel Höhen wechseln, fügen Sie ein neues Element, und haben die vorhandenen Kinder halten ihre Zustände? Muss ich benutzerdefinierten Ansichtsmodell-Verwaltungscode schreiben? Ist das in neueren Versionen von Ember gelöst?

Answer 1

Ihr Problem besteht darin, dass jedes Mal, wenn Sie ein Element hinzufügen, ein neues Array mit einer statischen heightTogle-Eigenschaft false zurückgegeben wird. Wie wäre es, wenn Sie die Struktur von baseItems und newItems so ändern, dass sie tatsächlich die Eigenschaft heightToggle haben.

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