Correct way to share state between controllers in Ember JS

Question

Image you have an ArrayController which displays a list of items, each item using its own ObjectController. Now you have an action handler on the ArrayController which should change some property of all items. This property should not be persistend, it's only for the view state. An example would be isSelected.

Looking at the Todos Example (http://todomvc.com/architecture-examples/emberjs/) it seems very similar to the isCompleted property. But the main difference is that this property is meant to be stored in the db and so the model is the right place here.

In Ember.js, controllers allow you to decorate your models with display logic. In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server.

Is there any way to loop through all item controllers of any ArrayController and update the controller's property? Would this be the correct approach?

Possible duplicate of Ember.js Best Practices - Sharing data between Components — Liam

edpaez edpaez · Accepted Answer · 2013-11-18T15:19:23

It sounds like the correct approach to me. Controllers as you quote are meant for holding properties that doesn't need to be persisted. These properties held application state and/or are used in display logic.

The main difference with the Todos example is that you would modify the property in the itemController and not in the model. (Having in mind you don't want the property to be stored on the server).

What I'd do would go something like this:

App.MyArrayController = Ember.ArrayController.extend({

    itemController: 'item',

    actions: {
        toggleSelection: function() {
            this.forEach(function(item, index) {
                item.toggleProperty('isSelected');
            });
        }
    }

});

In case you'd want the action to change the model, you'd have to access the content propery of each itemControlller.

Hope it helps!

Correct way to share state between controllers in Ember JS

1 Answers