outlet (name) public
The {{outlet}} helper lets you specify where a child route will render in your template. An important use of the {{outlet}} helper is in your application's application.hbs file:
1 2 3 4 5 6 7 8 9 10 11 12 | {{! app/templates/application.hbs }}<!-- header content goes here, and will always display -->{{my-header}}<div class="my-dynamic-content"> <!-- this content will change based on the current route, which depends on the current URL --> {{outlet}}</div><!-- footer content goes here, and will always display -->{{my-footer}} |
See templates guide for additional information on using {{outlet}} in application.hbs.
You may also specify a name for the {{outlet}}, which is useful when using more than one {{outlet}} in a template:
1 2 3 | {{outlet "menu"}}{{outlet "sidebar"}}{{outlet "main"}} |
Your routes can then render into a specific one of these outlets by specifying the outlet attribute in your renderTemplate function:
1 2 3 4 5 6 7 | // app/routes/menu.jsexport default Ember.Route.extend({ renderTemplate() { this.render({ outlet: 'menu' }); }}); |
See the routing guide for more information on how your route interacts with the {{outlet}} helper.
Note: Your content will not render if there isn't an {{outlet}} for it.
Parameters:
-
name
[String]
Please login to continue.