Ember.js Template Handlebars helpers: Partial

Ember.js Template Handlebars helpers: Partial

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>


<hr>
  <script type="text/x-handlebars">
    <p>from application tmpl: {{controller}}</p>  
    <p>from application tmpl: {{partial something}}</p>
    {{render "navigation"}}
  
    <p>{{outlet "header"}}</p>    
    <p>{{outlet}}</p> 
    <p>{{outlet "footer"}}</p>
      
  </script>

  <script type="text/x-handlebars" data-template-name="navigation">
      <p>from navigation tmpl: {{controller}}: {{partial something}}</p>
    <ul class="nav">
      <li><a href="#">{{siteName}}</a></li>  
      <li>{{#link-to 'home'}}Home{{/link-to}}</li>
      <li>{{#link-to 'about'}}About{{/link-to}}</li>
      <li>Logged in: <a href="#">{{render "user" username}}</a></li>
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="_something">
    something partial tmpl: {{someProperty}}
  </script>

  <script type="text/x-handlebars" data-template-name="user">
    {{firstName}} {{lastName}}
  </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">
22222
  </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');
});

// accessing its properties on NavigationController rather than the parent: ApplicationController
App.ApplicationController = Ember.Controller.extend({
    siteName: "Not this siteName, better use a partial :)",
    someProperty: "someProperty value from ApplicationController"
});

// accessing its properties on its own controller  
App.NavigationController = Ember.Controller.extend({
   siteName: "Ember HB Render",
   username: {"firstName":"J","lastName":"Crave"},
   someProperty: "someProperty value from NavigationController"
});

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('other');
    this.render('header', { outlet: 'header' });
    this.render('footer', { outlet: 'footer' });
  }
});

// accessing its properties on its own controller  
App.AboutController = Ember.Controller.extend({
   needs:['application'],
   username: {"firstName":"Jesse","lastName":"Cravens"},
   someProperty: "someProperty value from AboutController"
});