EMBER WORKSHOP: Ember.js Template Handlebars helpers TOC

Ember.js Template Handlebars helpers: outlet, render, partial, layout, yield, etc

by jdcravens

HTML

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

<b><a onclick="window.open('http://jsfiddle.net/jdcravens/czArC/','_blank')">outlet</a></b>
<p>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>

<b><a onclick="window.open('http://jsfiddle.net/jdcravens/er2GH/','_blank')">render</a></b>
<p>Calling ``{{render}}`` from within a template will insert another 
    template that matches the provided name. The inserted template will
    access its properties on its own controller (rather than the controller
    of the parent template).</p>

<b><a onclick="window.open('http://jsfiddle.net/jdcravens/t8yyp','_blank')">partial</a></b>
<p>``{{partial}}`` renders a template directly using the current context.
  If needed the context can be set using the `{{#with foo}}` helper.
</p>

  <script type="text/x-handlebars" data-template-name="header_bar">
    {{#with currentUser}}
      {{partial user_info}}
    {{/with}}
  </script>

  <script type="text/x-handlebars" data-template-name="_user_info">
    <span>Hello {{username}}!</span>
  </script>

<b>yield</b>
<p>``{{yield}}`` denotes an area of a template that will be rendered inside
    of another template. It has two main uses:</p>
<b>1. Use with `layout`</b>
<p>When used in a Handlebars template that is assigned to an ``Ember.View``
  instance's `layout` property Ember will render the layout template first,
    inserting the view's own rendered output at the ``{{yield}}`` location.</p>
    
<b>2. Use with Ember.Component</b>
<p>When designing components ``{{yield}}`` is used to denote where, inside the component's...