handlebars-render-helper
v1.0.0
Published
Render handlebars partials in a specific outlet
Downloads
12
Readme
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>