handlebars-render-helper v1.0.0

Handlebars render helper

Render handlebars partials in a specific outlet, similar to ember {{outlet}} helper.

How to register helper

let handlebars = require('handlebars');
let render = require('handlebars-render-helper');

// call render with your handlebars instance, it will return the helper
handlebars.registerHelper('render', render(handlebars));

Use cases

Imagine the following situation: you have menu component, depending of the webpage, you want to display different items inside the menu. if you have used mustache before, you may end up doing this:

menu.hbs

<div class="menu">
  <ul>
    {{# homepage }}
      {{> display-list-1}}
    {{/ homepage }}

    {{# contact}}
      {{> display-other-list}}
    {{/ contact}}
  </ul>
</div>

other-component.hbs

{{> menu homepage=true}}

output.html

<div class="menu">
  <ul>
    <li>example 1</li>
  </ul>
</div>

The main problem is that your component end up knowing all possible uses cases, creating a unwanted component logic. This helper allows you to pass your logic code as block, like this:

menu.hbs

<div class="menu">
  <ul>
    {{outlet}}
  </ul>
</div>

other-component.hbs

{{#render "menu"}}
  {{> display-list-1}}
{{/render}}

output.html

<div class="menu">
  <ul>
    <li>example 1</li>
  </ul>
</div>