如何从父组件设置Ember组件的内部状态？

Question

I have a table component which continas several row components. Each row component has a isSelected property.

Once a while I would like to reset all row components' isSelected inside to false from table's component clear action (a button).

How can I achive this functionality? Does passing data down is the only way to alter the internal state of a component?

Row Component

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

Table Selectable Component

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

A table is composed of some rows. You could keep references of rows in table and call their public methods.

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