Ember.js multiple, named outlet usage

With the new Router you can do something like this:

{{outlet "menu"}}
{{outlet}}

In your Route you can handle the content of the outlets:

// application route
Ember.Route.extend({
    renderTemplate: function() {
        // Render default outlet   
        this.render();
        // render extra outlets
        this.render("menu", {
            outlet: "menu",
            into: "application" // important when using at root level
        });
    }
});

You should have an menu-template though.

You can read more about it here.

UPDATE: This code is outdated, due to the Ember api changes.

I have reached a point, where I can say that I found the solution which is best for myself.

<script type="text/x-handlebars" data-template-name="application">
<div class="container">
    <div class="toolbar">{{outlet toolbar}}</div>
    <div class="main">{{outlet dashboard}}</div>
    <div class="sidebar">{{outlet sidebar}}</div>
</div>
</script>

Using such a application template, I can choose where to render views. Like this:

App.router = Ember.Router.create({
    enableLogging: true,
    location: 'history',
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/admin/',
            redirectsTo: 'login'
        }),
        login: Ember.Route.extend({
            route: '/admin/login/',
            doLogin: function(router, context) {
                "use strict";
                router.transitionTo('dashboard', context);
            },
            connectOutlets: function (router, context) {
                "use strict";
                router.get('applicationController').connectOutlet('login', "login");
            }
        }),
        dashboard: Ember.Route.extend({
            route: '/admin/dashboard/',
            doLogout: function(router, context) {
                "use strict";
                router.transitionTo('login', context);
            },
            connectOutlets: function (router, context) {
                "use strict";
                router.get('applicationController').connectOutlet('sidebar', 'sidebar');
                router.get('applicationController').connectOutlet('toolbar', 'toolbar');
                router.get('applicationController').connectOutlet('dashboard', 'dashboard');
            }
        })
    })
});

I have the three views, which are not important from the solution point of view, those get rendered to their outlets.

Hope this helps others.

In your application template, you'll need to declare a named outlet as {{outlet sidebar}}. Likewise for the toolbars you mentioned.

EDIT: The rest is out of date. As @dineth said, see Rendering a Template.

Then in your route (lets say App.NavigationView is what you want to stick there):

App.Router = Em.Router.extend({    
    root: Em.Route.extend({
        index: Em.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('sidebar', 'navigation');
            }
        })
    })
});

Sidebar example: http://jsfiddle.net/q3snW/7/

Reference this documentation on the {{outlet}} helper, and this documentation on the .connectOutlet callback.