如何從父組件設置Ember組件的內部狀態？

Question

我有一個表格組件，它連續多行組件。每一行組件都有一個isSelected屬性。

曾經有一段時間我想從表的組件clear行動（一個按鈕）重置所有行組件裏面到false。

如何實現此功能？是否通過數據減少是改變組件內部狀態的唯一方法？

行組件

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

表可選構件

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

甲表由某些行的。您可以在表中保留行的引用並調用它們的公共方法。

//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}}