Handlebars Templates with Browserify

Custom Helper Registration

To register custom helpers, require the hbsfy/runtime and run registerHelper to create the helper. This example creates a compare helper courtesy of the Comparison block helper for handlebars templates post by doginthehat.

Edit index.js, before the document.querySelector, require the hbsfy/runtime and register the compare custom helper.

index.js
var data = require('./modules/data');
var list = require('../hbs/people.hbs');

var Handlebars = require('hbsfy/runtime');

Handlebars.registerHelper('compare', function (lvalue, operator, rvalue, options) {

    var operators, result;

    if (arguments.length < 3) {
        throw new Error("Handlerbars Helper 'compare' needs 2 parameters");
    }

    if (options === undefined) {
        options = rvalue;
        rvalue = operator;
        operator = "===";
    }

    operators = {
        '==': function (l, r) { return l == r; },
        '===': function (l, r) { return l === r; },
        '!=': function (l, r) { return l != r; },
        '!==': function (l, r) { return l !== r; },
        '<': function (l, r) { return l < r; },
        '>': function (l, r) { return l > r; },
        '<=': function (l, r) { return l <= r; },
        '>=': function (l, r) { return l >= r; },
        'typeof': function (l, r) { return typeof l == r; }
    };

    if (!operators[operator]) {
        throw new Error("Handlerbars Helper 'compare' doesn't know the operator " + operator);
    }

    result = operators[operator](lvalue, rvalue);

    if (result) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }

});

document.querySelector('#people').innerHTML = list(data);

Edit the template to utilize the compare helper.

people.hbs
{{#each people}}
<li>
{{#compare lastName "==" 'Katz'}}Mr. {{/compare}}
{{firstName}} {{lastName}}
</li>
{{/each}}

Helper Module

After testing that everything works by running gulp, this would be a good time to break out the helper function in index.js into its own module.

In the modules folder, create a hb-helpers folder and in that folder create the compare.js helper. Take the anonymous function parameter from the Handlebars.registerHelper call in index.js and assign it to the module.exports in compare.js.

compare.js
module.exports = function(lvalue, operator, rvalue, options) {

    var operators, result;

    if (arguments.length < 3) {
        throw new Error("Handlerbars Helper 'compare' needs 2 parameters");
    }

    if (options === undefined) {
        options = rvalue;
        rvalue = operator;
        operator = "===";
    }

    operators = {
        '==': function (l, r) { return l == r; },
        '===': function (l, r) { return l === r; },
        '!=': function (l, r) { return l != r; },
        '!==': function (l, r) { return l !== r; },
        '<': function (l, r) { return l < r; },
        '>': function (l, r) { return l > r; },
        '<=': function (l, r) { return l <= r; },
        '>=': function (l, r) { return l >= r; },
        'typeof': function (l, r) { return typeof l == r; }
    };

    if (!operators[operator]) {
        throw new Error("Handlerbars Helper 'compare' doesn't know the operator " + operator);
    }

    result = operators[operator](lvalue, rvalue);

    if (result) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }

};

Update index.js: Create a compare variable and assign the exported function from the new compare module with require; Replace the anonymous function parameter in the Handlebars.registerHelper call with the compare variable.

index.js
var data = require('./modules/data');
var list = require('../hbs/people.hbs');

var Handlebars = require('hbsfy/runtime');

var compare = require('./modules/hb-helpers/compare');

Handlebars.registerHelper('compare', compare);

document.querySelector('#people').innerHTML = list(data);

Source Code

Published by

Jim Frenette

Web Developer – views here are my own except those taken from people more clever than me.

Loading Disqus Comments ...
Loading Facebook Comments ...