Ember.js Template Handlebars helpers: Outlet

Ember.js Template Handlebars helpers: Outlet

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<h3>Ember.js Template Handlebars helpers: Outlet and named outlets</h3>

<b>outlet</b>
<p>1. The ``{{outlet}}`` helper is a placeholder that the router will fill in with the appropriate template based on the current state of the application.</p>

<p>2. By default, a template based on Ember's naming conventions will be rendered into the ``{{outlet}}`` (e.g. `App.PostsRoute` will render the `posts` template).</p>

<p>3. You can render a different template by using the `render()` method in the route's `renderTemplate` hook. The following will render the `other` templates into the `outlet`s.</p>
      
  <script type="text/x-handlebars">
    <ul class="nav">
      <li>{{#link-to 'home'}}Home{{/link-to}}</li>
      <li>{{#link-to 'about'}}About{{/link-to}}</li>
    </ul>
      
    <p>{{outlet "header"}}</p>    
    <p>{{outlet}}</p> 
    <p>{{outlet "footer"}}</p>   
  </script>

  <script type="text/x-handlebars" data-template-name="home">
    Home
  </script>

  <script type="text/x-handlebars" data-template-name="about">
    About
  </script>

  <script type="text/x-handlebars" data-template-name="other">
    Other
  </script>

  <script type="text/x-handlebars" data-template-name="header">
    Header
  </script>

  <script type="text/x-handlebars" data-template-name="footer">
    Footer
  </script>

JavaScript

var App = Ember.Application.create({
    //LOG_TRANSITIONS: true,
    //LOG_RESOLVER: true,
    //LOG_ACTIVE_GENERATION: true, // log whats being actively generated
    //LOG_MODULE_RESOLVER: true, 
    //LOG_TRANSITIONS: true,
    //LOG_TRANSITIONS_INTERNAL: true,
    //LOG_VIEW_LOOKUPS: true 
});

App.Router.map(function () {
  this.route('home');
  this.route('about');
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('home');
  }
});

App.HomeRoute = Ember.Route.extend({
  renderTemplate: function () {
    this.render('home');
    this.render('other', { outlet: 'header' });
    this.render('other', { outlet: 'footer' });
  }
});

App.AboutRoute = Ember.Route.extend({
  renderTemplate: function () {
    this.render('about');
    this.render('header', { outlet: 'header' });
    this.render('footer', { outlet: 'footer' });
  }
});