Ember.js: Iterating through multiple models set on controller

Question

I want to declare two models to be loaded by my controller.

I am not using the model,beforeModel, or afterModel hooks because:

1. I don't have to implement loading routes/templates
2. I can load each model independently in the page (like lazy loading)

I am using the setupController hook in my route as so:

setupController: function(controller, model) {
        var that = this;

        controller.set('model', {
            stations: that.store.find('station'),
            packages: that.store.find('package'),
        });
}

My controller is an Ember.Controller.

In order to iterate through these models in Handlebars I have to use model.stations.content.content which makes me think I am doing something wrong:

{{#each station in model.stations.content.content}}
//  .....
{{/each}}

Is there a better way to set these models on the controller or use a different controller type or something?

Answer 1

@MilkyWayJoe's method is definitely the right way to do it if you realize that if you have a large model or your AJAX requests take a long time, your UI will go blank and Ember will try to find a loading process while the model is loading.

@Chaosekie suggested the answer to my question which was to wait for the promise to load the model from the store to fulfill then set the property on the controller.

I.e. in the route:

setupController: function(controller, model) {
        this.store.find('station').then(function(stations) {
            controller.set('stations',stations);
        });
        this.store.find('package').then(function(packages) {
            controller.set('packages', packages);
        });
}

This allows one to iterate through both models using the 'normal' way in Handlebars:

{{#each package in packages}}
// ....
{{/each}}

{{#each station in stations}}
// ....
{{/each}}

Answer 2

You can change your model to return Ember.RSVP.hash which will act like a promise bag, and within the scope of the hash you fill up the attributes stations and packages with your data, so when the model gets resolved it will set that hash schema as the model in your controller:

[...]
model: function() {
    return Em.RSVP.hash({
        stations: this.store.find('station'),
        packages: this.store.find('package')
    });
} 
[...]

Then in your template:

{{#each item in model.stations}}
    <li>{{item.name}}</li>
{{/each}}

or

{{#each item in model.packages}}
    <li>{{item.name}}</li>
{{/each}}

(See jsbin)

Answer 3

You do not need to create a new object for your model.

You could do the following in your controller:

setupController: function(controller, model){
  controller.set('model', model);
  this.stations().then(function(value){
    controller.set('stations', value);  
  });
}

Where stations is:

stations: function() {
  return this.store.find('station');
}

Then you can use stations in your template in the same way as you would use model. Check out this example

But a controller should really only decorate one model, you might consider creating nested routes ( which will give you nested controllers ).