How to update the contents of one ArrayController from a selected value of another ArrayController in Ember.js

Question

I have the following problem in ember.js. The child controller depends on the selected value in the parent controller to determine its contents. In the database, the child has a parent_id link.

App.parentsController = Em.ArrayController.create({ content: [], selected: null }); App.sonsController = Em.ArrayController.create({ // the value of content depends on the id of // the selected item in the parentsController content: [], selected: null }); App.daughtersController = Em.ArrayController.create({ // the value of content depends on the id of // the selected item in the parentsController content: [], selected: null }); 

I would prefer to solve this without the Controllers parents knowing anything about other controllers. This should be possible with observers, bindings, or even through calculations, but I don’t know where to start. Any help would be well appreciated.

Answer 1

You can use the binding system. sonsController should observe the parentsController.selected property, and then update its contents.

Here is an example of how you can do this:

 App.parentsController = Em.ArrayController.create({ content: [], selected: null }); App.sonsController = Em.ArrayController.create({ parentControllerBinding: 'App.parentsController', content: [], updateContent: function() { var selected = this.getPath('parentController.selected'); var newContent = Ember.A(); newContent.pushObject(selected); this.set('content', newContent); }.observes('parentController.selected') }); 

And here is related to jsfiddle .

NB: you can also directly bind the selected property:

 App.sonsController = Em.ArrayController.create({ parentSelectedBinding: 'App.parentsController.selected', ... updateContent: function() { ... }.observes('parentSelected') })