How to render multiple templates for a route in Router v2

Question

my index template has two outlets, one for header, another for content. the template rendered in the content changes depending on the content being viewed.

In the old router, this could be done by calling connectOutlet on different controllers who owned that template. I can't figure out how to do the same in the new router.

any suggestions?

Answer 1

With my research, I came to this: Say you have a router defined like this:

App.Router.map(function(match) {
  match('/').to('index');
});

ApplicationTemplate:

<script type="text/x-handlebars">
{{outlet header}}
{{outlet}}
</script>

IndexTemplate:

<script type="text/x-handlebars" data-template-name="index">
{{outlet dashboard}}
{{outlet spaces}}
</script>

Now, What we want is that when user goes to the index router, the page should:

• Render index into main outlet and header into header outlet of application template.
• render dashboard, spaces template into Index Template.

To achieve this, we write the following code in indexRoute

App.IndexRoute = Em.Route.extend({
    renderTemplate: function(controller, model){
        //Render header into header outlet
        this.render('header',{
            outlet:'header'
        });
        //Render index into main outlet. If you comment out 
        //this line, the code below fails
        this.render('index');

        //by using into, we can render into the index template
        //Note: The controller is optional.if not specified,
        //ember picks up controller for the given template.
        this.render('dashboard',{
            outlet:'dashboard',
            into:'index',
            controller:this.controllerFor('somethingElse', App.TestModel.find())
        });
        //controller is SpacesController
        this.render('spaces',{
            outlet:'spaces',
            into:'index'
        });
    }
});

Answer 2

you can use the renderTemplates function in the router to render mulitple views to name outlets:

renderTemplates:function () {
   this.render('todos_list', {
       into:'todos', //template name
       outlet: 'todos', //named outlet
       controller: 'listController' //controller you want to use
   });
   this.render('todos_test', {
       into:'todos',
       outlet: 'test',
       controller: 'testController'
   });
},

setupControllers:function (controller, model) {
   this.controllerFor('list').set('content', listmodel.find());
   this.controllerFor('test').set('content', testmodel.find());
}

The setupControllerControllerFor function will allow you to assign what we set as 'context' in the previous router.

In your template, you would name outlets just as before:

{{outlet list}}
{{outlet test}}

Hope this helps :)