Parent controller load content for child controllers

Ember Data
1

I have a parent controller and when it’s route is called I not only want to load it’s model but I’d like to load more content for it’s child controllers.

These child controllers don’t have routes associated with them so it must be done when the parent is invoked.

I’m using the “needs” property in all the controllers to set their relationships with each other but those properties are not available when loading the model in the parent route.

2

Load all the models in the parent route’s model hook, I usually use a RSVP.Hash, and then in the setupController hook you can access and set the other controllers’ models with:

this.controllerFor('child').set('model', model.child);

Also don’t forgot controller.set('model', model.parent'); to setup the parent model.

3

So the way I have it set up right now is that both the parent and the children have references to each other in a circular fashion.

So I have the parent (Games) controller and 2 children (Sort and Filter) controllers. The sort and filter controllers have dynamic options that will be read from a database so they need their own models.

I read the only way to accomplish the circular dependencies was to declare the references like this when declaring the classes:

In the parent controller:

App.GamesController = Ember.ArrayController.extend({
needs: [“filter”, “sort”],
filterController: Ember.computed.alias(“controllers.filter”),
sortController: Ember.computed.alias(“controllers.sort”) });

And in the children controllers:

App.FilterController = Ember.ArrayController.extend({
needs:“games”,
gamesController: Ember.computed.alias(“controllers.games”) });

App.SortController = Ember.ArrayController.extend({
needs: “games”, games: Ember.computed.alias(“controllers.games”); });

I don’t think the way you’re referencing the children from the the route would work in my setup. Does setupController get called after the controller class has been initialized?

4

I think I better way to approach this would be to have the parent controller hold all the data and just have 2 components for the sort and filter.

5

I’m not sure on your specific usecase and the best architecture (sort and filter seem like things to go in query params, not have their own controller, and components usually are isolated pieces of code), but here is a JSBin showing my above solution.

http://emberjs.jsbin.com/legenacu/15/edit