mercredi 15 février 2017

How to set Ember component's internal state from parent component?

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?

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




Aucun commentaire:

Enregistrer un commentaire