Ember.js: what is the preferred way for multiple objects to respond to events?

Question

I have an Object (Option) that is nested three levels deep (Items->Options->Option). When an Option is selected, all three objects will change their display (Option will be highlighted, other Options will be de-emphasised, and the Items will be rearranged).

What is the preferred way to handle this series of actions?

• Ember.js - Propagate event up the controller/router chain - In this example each object responds to the action then tells the action to continue propagating. Makes sense, but I get the impression that this may be an unorthodox approach to what must be a common problem. Is this a good option?

Answer 1

You have three choices:

1. Propagate up the controller hierarchy.

This is the easiest and best option when the objects are actually in a hierarchy or tree on the model side, because then each object's controller has an explicit reference to the parent object's controller.

2. Propagate up the route hierarchy

This is the best option when the view hierarchy does not necessarily correspond to a tree structure in the models, but is semantic. If you think the semantic arrangement of the related objects is prone to change in the future, this a better option. However, you are still assuming that there IS a hierarchy

3. Let the first handler be the topmost route that "knows" how the objects are related,

and that handler sends events to the necessary controllers. This option is best when the relationship between the objects in a particular set of views is semantic and not necessarily hierarchical and you think the routes/views might move around during the development of the app. The best example of such situations are "negative" events -- for example, deselect

You can always mix these strategies. I've found that refactoring is easier if events tend to go up to a route and back down to necessary controllers rather than having a lot of needs in my controllers.