Rendering a Template Edit Page
One of the most important jobs of a route handler is rendering the appropriate template to the screen.
By default, a route handler will render the template into the closest parent with a template.
1 2 3 4 5 |
App.Router.map(function() { this.resource('posts'); }); App.PostsRoute = Ember.Route.extend(); |
If you want to render a template other than the one associated with the
route handler, implement the renderTemplate
hook:
1 2 3 4 5 |
App.PostsRoute = Ember.Route.extend({ renderTemplate: function() { this.render('favoritePost'); } }); |
If you want to use a different controller than the route handler's
controller, pass the controller's name in the controller
option:
1 2 3 4 5 |
App.PostsRoute = Ember.Route.extend({ renderTemplate: function() { this.render({ controller: 'favoritePost' }); } }); |
Ember allows you to name your outlets. For instance, this code allows you to specify two outlets with distinct names:
So, if you want to render your posts into the sidebar
outlet, use code
like this:
1 2 3 4 5 |
App.PostsRoute = Ember.Route.extend({ renderTemplate: function() { this.render({ outlet: 'sidebar' }); } }); |
All of the options described above can be used together in whatever combination you'd like:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
App.PostsRoute = Ember.Route.extend({ renderTemplate: function() { var controller = this.controllerFor('favoritePost'); // Render the `favoritePost` template into // the outlet `posts`, and display the `favoritePost` // controller. this.render('favoritePost', { outlet: 'posts', controller: controller }); } }); |
If you want to render two different templates into outlets of two different rendered templates of a route:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
App.PostRoute = App.Route.extend({ renderTemplate: function() { this.render('favoritePost', { // the template to render into: 'posts', // the route to render into outlet: 'posts', // the name of the outlet in the route's template controller: 'blogPost' // the controller to use for the template }); this.render('comments', { into: 'favoritePost', outlet: 'comment', controller: 'blogPost' }); } }); |