Basic Helpers

Basic Example of block helpers in Handlebars

by Christopher McCulloh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script id="basic-template-helper" type="text/x-handlebars-template">
    {{!-- everything shoved in options.hash --}}
    <dt>{{v1}} == {{v2}} ? <dt>
    <dd>
        {{#isEqual v1=v1 v2=v2}}
            true
        {{else}}
            false
        {{/isEqual}}
    </dd>

    {{!-- variables passed as args --}}
    <dt>{{v1}} == {{v2}} ? </dt>
    <dd>
        {{#isEqualVars v1 v2}}
            true
        {{else}}
            false
        {{/isEqualVars}}
    </dd>

    {{!-- mix of variables passed as args and properties pushed into options.hash --}}        
    <dt>{{v1}} == arbitrary string ? </dt>
    <dd>
        {{#isEqualMixed v1 v2="arbitrary string"}}
            true
        {{else}}
            false
        {{/isEqualMixed}}
    </dd>
</script>
<dl id="target"></dl>

CSS

dd {
    font-weight: bold;
}
dt {
    width: 250px;
    float: left;
    text-align: right;
    margin-right: 6px;
}

JavaScript

//Either shove everything in options hash
Handlebars.registerHelper('isEqual', function (options) {
    if (options.hash.v1 === options.hash.v2) {
        return options.fn();
    } else {
        return options.inverse();
    }
});

//Or rely on vars only
Handlebars.registerHelper('isEqualVars', function (arg1, arg2, options) {
    if (arg1 === arg2) {
        return options.fn();
    } else {
        return options.inverse();
    }
});

//Or mix'n'match
Handlebars.registerHelper('isEqualMixed', function (arg1, options) {
    if (arg1 === options.hash.v2) {
        return options.fn();
    } else {
        return options.inverse();
    }
});

var template = Handlebars.compile($('#basic-template-helper').html());
$('#target').append(template({
    v1: "not",
    v2: "equal"
}));
$('#target').append(template({
    v1: "arbitraryString",
    v2: "arbitraryString"
}));
$('#target').append(template({
    v1: 1,
    v2: 1
}));
$('#target').append(template({
    v1: 2,
    v2: 1
}));