I have an application, which will have a view layer organized in three parts:
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.
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.
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.
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.