Templates.helpers.outlet()

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:

{{! 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:

{{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:

// app/routes/menu.js

export 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.