I'm trying to get to grips with Handlebars / Mustache in order to build an atomic design (à la PatternLab).
I'm doing ok but I've stumbled trying to define a partial.
Here's my example:
{{#partial 'selectOption' }}
<option value="{{value}}" label="{{label}}" {{#disabled}}disabled{{/disabled}} {{#selected}}selected{{/selected}}>{{text}}</option>
{{/partial}}
{{#.}}
<select name="{{name}}" id="{{ID}}" class="selectField selectList {{cssString}}" {{{htmlAttributes}}}>
{{#optGroups}}
<optGroup {{#disabled}}disabled{{/disabled}} label="{{label}}">
{{#options}}
{{> selectOption}}
{{/options}}
</optGroup>
{{/optGroups}}
{{#options}}
{{> selectOption}}
{{/options}}
</select>
{{/.}}
What I'm trying to achieve is creating a partial for the 'option' tag. I've been crawling all over Google and SO all afternoon trying to get my head 'round this one and this is the closest I've got.
However, when I try to run this I get: Uncaught Error: Missing helper: 'partial'
I thought that partials were built-in to handlebars but if not I guess I have to install it as a helper? I've tried to work that out too but to no avail.
The examples on the handlebars site don't seem to work (or I'm copying them into the wrong places).
Any help?
OK, so fresh eyes and a good nights sleep solves the problem again. I was somehow using v2.0.0 of handlebars instead of the latest (v4.0.0).
After updating I can now create an inline partial using the following syntax:
{{#*inline "selectOption"}}
<option value="{{value}}" label="{{label}}" {{#disabled}}disabled{{/disabled}} {{#selected}}selected{{/selected}}>{{text}}</option>
{{/inline}}
Hope this is of use to someone else.