HandleBars Helper

HandleBarsHelper.js

/*
Serkan Berksoy May 2015
Create a list of tagnames that consist handlebars mustache template

CompileTemplates  method gathers all templates and compiles them. Also stores them for rebind
Also it hides them before first binding so there is no flicker and tags being shown on screen

example usage:
handleBarsHelper.compileTemplates();
handleBarsHelper.elements.tagName1.html(handleBarsHelper.templates.tagName1(
{
    cities : getCitiesModel(
            [
                {city : "İstanbul", data : istanbulResponse[0]},
                {city : "Ankara", data : ankaraResponse[0]},
                {city : "İzmir", data : izmirResponse[0]}
            ])
}));
handleBarsHelper.elements.tagName1.show();
*/

var handleBarsHelper =
{
    tagNames  : ["tagName1", "tagName2"
                ],
    elements  : {},
    templates : {},
    render : function(id, Model)
    {
        var tag = $("#" + id);
        tag.html(Handlebars.compile(tag.html())(Model));
    },
    renderWithTemplate : function(id, Model, template)
    {
        $("#" + id).html(Handlebars.compile(template)(Model));
    },    
    compileTemplates : function()
    {
        for(var i = 0; i < handleBarsHelper.tagNames.length; i++)
        {
            handleBarsHelper.elements[handleBarsHelper.tagNames[i]] = $("#" + handleBarsHelper.tagNames[i]);
            handleBarsHelper.templates[handleBarsHelper.tagNames[i]] = Handlebars.compile(handleBarsHelper.elements[handleBarsHelper.tagNames[i]].html());

            handleBarsHelper.elements[handleBarsHelper.tagNames[i]].hide();
        }
    }
};

// More helpers.
Handlebars.registerHelper("everyOther", function (index, amount, scope) {
    if ( ++index % amount )
        return scope.inverse(this);
    else
        return scope.fn(this);
});

Handlebars.registerHelper("isNull", function(conditional, options) {
  if(conditional == null) {
    return options.fn(this);
  }
});

Also you can get tags' elements without requerying everytime with JQuery and reuse templates same way.

Requires Handlebars.js and JQuery