Ember.js Template Handlebars helpers: Outlet

Ember.js Template Handlebars helpers: Outlet

by jdcravens

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</h3>

  <script type="text/x-handlebars">
    <p>{{outlet}}</p>   
  </script>

  <script type="text/x-handlebars" data-template-name="profile">
      
      {{! comments that dont show in the markup }}
      
      <h2>Profiles:</h2>
        {{#each}}
          <h2>{{name}}</h2>
            {{#with status}}
              {{#if isOnline}}
                <p>online: {{isOnline}}</p>
              {{else}}
                {{#if isActive}}
                  <p>online: {{isOnline}}</p>
                {{else}}
                  <p>User was deactivated.</p>
                {{/if}}
              {{/if}}
            {{/with}}
        {{/each}}
  </script>

JavaScript

var App = Em.Application.create();

// THE FOLLOWING WILL MAKE MORE SENSE LATER
// IGNORE FOR NOW

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

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

App.ProfileRoute = Ember.Route.extend({
    model: function(){
      return [
       {
         name: 'CrafterJohn', 
         status: {isActive: true, isOnline: true} 
       },
       {
         name: 'MinerPaul', 
         status: {isActive: true, isOnline: false} 
       },
       {
         name: 'ExplorerRingo',
         status: {isActive: false, isOnline: false}
       }          
      ];
    }
});