Ember.js multiple, using a named outlet

Question

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

• Side panel
• Left panel
• Toolbar right

I spent a few minutes trying to find something useful with Google, but I was out of luck. I will need a short and complete example of an application on how to do this using Router and connectOutlet with the indicated points.

thanks ahead.

Answer 1

UPDATE: this code is deprecated due to changes in the Ember api.

I have reached a point where I can say that I have found a solution that is better for me.

<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 an application template, I can choose where to make representations. 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 three kinds that are not important from the point of view of the solution, which appear in their conclusions.

Hope this helps others.

Answer 2

With the new router, you can do something like this:

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

In your route, you can process the contents of the exits:

 // 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 menu -template.

You can find out more about this.

Answer 3

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

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

Then in your route (let's say App.NavigationView is what you want to insert 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/

Link this documentation to the {{outlet}} helper and this documentation in the .connectOutlet .