Как установить внутреннее состояние компонента Ember из родительского компонента?

Question

У меня есть компонент таблицы, который содержит несколько компонентов ряда. Каждый компонент строки имеет свойство isSelected.

Время от времени я хотел бы сбросить все компоненты строки isSelected внутри до false от компонента стола clear действие (кнопка).

Как я могу реализовать эту функцию? Передача данных вниз - единственный способ изменить внутреннее состояние компонента?

Ряд компонентов

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