Emberjs loading multiple controllers into one

Question

SCENARIO
I currently have an IndexRoute. I want to load 3 other controllers into it. Those 3 other controllers are called Sports

Answer 1

route's are only hit when you define and hit a route via url.

For example if you'd defined your router like this:

Ember.Router.map(function(){
  this.resource('foo', function(){
    this.resource('bar');
  });
});

And hit /foo/bar

It would hit

App.FooRoute = Em.Route.extend({

});

and

App.BarRoute = Em.Route.extend({

});

If you want to hit it all from just the root url you might as well return it all from the application model hook.

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return {
      colors: ['red', 'yellow', 'blue'],
      news: ['Europe', 'Asia', 'America'],
      business: ['Markets', 'Finance', 'Stocks'],
      sports: ['golf', 'hockey', 'football']
    };
  }  
});

And then you can use render from the template and supply it a template name and a model.

http://jsbin.com/gecarido/3/edit