Wie setze ich den internen Zustand der Ember-Komponente von der übergeordneten Komponente?

Question

Ich habe eine Tabellenkomponente, die mehrere Zeilenkomponenten enthält. Jede Zeilenkomponente hat eine isSelected Eigenschaft.

Einmal möchte ich alle Zeile Komponenten isSelected ins Innere auf false von Tabelle Komponente clear Aktion (eine Schaltfläche) zurücksetzen.

Wie kann ich diese Funktionalität erreichen? Ist die Weitergabe von Daten die einzige Möglichkeit, den internen Zustand einer Komponente zu ändern?

Zeilenkomponente

export default Ember.Component.extend({ 
    tagName: 'tr', 
    isSelected: false, 
    classNameBindings: ['isSelected:selected'], 

    click() { 
     const data = this.get('data'); 
     const selectedState = this.get('isSelected'); 
     this._toggleSelected(); 

     if (selectedState) { 
      this.sendAction('rowClicked', {data: data, operator: 'remove'}); 
     } else { 
      this.sendAction('rowClicked', {data: data, operator: 'add'}); 
     } 
    }, 

    _toggleSelected() { 
     this.toggleProperty('isSelected'); 
    } 
}); 

Tabelle Wählbare Komponente

export default Ember.Component.extend({ 
    selectedRows: [], 
    classNames: ['table-selectable'], 

    actions: { 
     rowClicked(row) { 
      this._addToSelectedRows(row); 
     }, 

     cleanSelectedRows() { 
      this._cleanSelectedRows(); 
     } 
    }, 
    _addToSelectedRows(row) { 
     console.log(row); 
     this.get('selectedRows').addObject(row); 
    }, 
    _cleanSelectedRows() { 
     this.set('selectedRows', []); 
    } 
}); 

Answer 1

ist eine Tabelle von einigen Zeilen zusammengesetzt ist. Sie können Referenzen von Zeilen in der Tabelle behalten und ihre öffentlichen Methoden aufrufen.

//row.js 

    export default Ember.Component.extend({ 
     didInsertElement(){ 
     this._super(...arguments); 
     this.get('table').registerRow(this); 
     }, 

     setSelected(selected){ 
     this.set('isSelected', selected); 
     } 
    }); 


//table.js 

    export default Ember.Component.extend({ 
     rows: Ember.computed(function(){return Ember.A();}), 
     registerRow(row){ 
     this.get('rows').pushObject(row); 
     }, 
     clearAll(){ 
     this.get('rows').forEach(function(row){ 
      row.setSelected(false); 
     }); 
     } 
    }); 


//table.hbs 

{{table-row table=this}}