Ember.js multiple, named outlet usage

Question

I have an application, which will have a view layer organized in three parts:

1. Sidebar
2. Toolbar-left
3. Toolbar-right

I have spent may last few hours with trying to find something helpful with google, but I had no luck. I would need a short and complete application example on how to do this using Router and connectOutlet, with named outlets.

Thx ahead.

Answer 1

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.