Shared state on itemController


#1

Good night.

I have a custom table component with sorting.

Each header uses itemController to perform sorting on click action. E.g.: click -> asc -> click - desc - click - reset

It also uses templates to display sorting direction.

Code:

module.exports = App.SortableColumnsMixin = Em.Mixin.create({

    //skip
    
    sortingProperties: [],
    sortedContent: Em.computed.sort('content', 'sortingProperties'),

    actions: {
        sortContent: function(sortBy) {
            this.set('sortingProperties', sortBy ? [sortBy] : []);
        }
    }
});

module.exports = App.SortedTableHeaderItemController = Em.ObjectController.extend({
    sortDirection: null,
    isAsc: Em.computed.equal('sortDirection', 'asc'),
    isDesc: Em.computed.equal('sortDirection', 'desc'),

    // skip

    actions: {
        sortContent: function() {
            this.set('sortDirection', this.nextSortDirection(this.get('sortDirection')));
            return true;
        }
    }
});

What is the best way to reset sortDirection on all itemControllers except controller that fired an action?

Thank you.


#2

I don’t know if there is a best way or not, but the following two ways jump to mind:

  1. Trigger an action that gets handled a controller level up and let that controller notify all of its children that they need to reset their sort.
  2. Use a pubsub event to notify all interested parties that a new sort has been chosen and that they should reset their sort.

Hopefully this is at least moderately helpful to you.