Ember.js handlebars template named yields

exposition.markdown

What is it?

Here is the Ember.js usage pattern for implementing named yield sections using nothing more than if statements and regular yield.

This has the advantage of not introducing irritating extra wrapper elements as is the case when using ember-wormhole or ember-named-yield

matdash-sidenav-template.hbs

{{#with (hash
  tab=(component "matdash-sidenav-link")
  link=(component "matdash-menu-link")) as |ctxHash|}}
  <header class="matdash-sidenav__header">
    <img src={{avatar}} class="matdash-topnav__avatar-img">
    <div class="matdash-sidenav__avatar-dropdown">
      <span>{{title}}</span>
      <div class="mdl-layout-spacer"></div>

      {{#mdl-menu align="bottom-right" icon="arrow_drop_down"}}
        {{yield ctxHash "menu"}}
      {{/mdl-menu}}
    </div>
  </header>

  <div class="matdash-sidenav__navigation-ctn mdl-navigation">
    <div class="matdash-sidenav__navigation mdl-color--blue-grey-800">
      {{yield ctxHash}}
    </div>
  </div>
{{/with}}

templates-dashboard.hbs

{{#windows.sidenav avatar="assets/images/user.jpg" title=xession.model.email as |nav section|}}
    {{#if (eq section "menu")}}
      {{#nav.link "dashboard.index"}}
        Dashboard Link
      {{/nav.link}}
    {{else}}
      {{#nav.tab "index"}}
        Some Link
      {{/nav.tab}}
      {{#nav.tab "dashboard.index"}}
        Dashboard Link
      {{/nav.tab}}
    {{/if}}
  {{/windows.sidenav}}