如何从父组件设置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}}