Handlebars: An Introduction

Let’s face it, gone are the days where static HTML markup was sufficient, and clients were happy with animated gifs all around their websites, but that’s all a thing of the past. Now every little thing you can think of has to be dynamic, the data is constantly changing and so is the webpage.

For developers it is a tricky task to manage the layouts and constantly changing data. Out of the recent flood of JS files and plugins there are some gems which really have a need, out of those there is Handlebars.

Handlebars is a templating engine which renders data onto templates, ready to display to the end user.

Handlebars templates are really simple, as they all are just HTML markup, which are embedded with Handlebars expressions {{ handlebars expression }}.

Let’s start with how to use handlebars in our webpages.

First off we need the handlebars javascript file included in our webpage, which can be downloaded from Handlebars Official Website

To add a Handlebars template we simply include a script tag which will contain our template (notice the different type of script tag) :

<script id="firstTemplate" type="text/x-handlebars-template">
    {{#each this}} 
        <h1>{{name}}</h1> 
        <p>Email: {{email}}</p> 
    {{/each}} 
</script>

In our example we just simply want to iterate over multiple people and display their name and some quote, to do so we will use handlebar’s {{#each}} and {{/each}} helpers, these will repeat and render the content that comes between them. The type we use is text/x-handlebars-template which tells the browser this is not to be executed as normal javascript.

You may also notice we pass this to {{#each}} helper, this is the context for the data to be passed.
i.e if we pass an object which has a key called Person we would write {{#each Person}}.

Now that we have our basic template set, we can now provide the data to be rendered,

<script type="text/javascript"> 
    var data = [ 
        {name: 'John doe', email: 'john@doe.com'}, 
        {name: 'Jane doe', email: 'jane@doe.com'}, 
        {name: 'Manoj Nama', email: 'manoj.nama@intelligrape.com'} 
    ]; 

    var template = $('#firstTemplate').html(); 
    var compiledTemplate = Handlebars.compile(template); 
    $(document.body).append( compiledTemplate(data) ); 
</script> 

In the above snippet, we have and array of objects to iterate over, the data can come from anywhere, we have hardcoded it for demostration purposes.

First, we get the html out of our script template firstTemplate, then we need to compile that template, to do so, when we reference the Handlebars.js file, we have a global variable aptly named Handlebars. To compile we simply pass in our template in Handlebars.compile() method.

Once we have compiled the template, it returns a function in which we pass our data to be rendered, we can then add our template to the DOM. In this case we simply append our template to body, and Ta-da we have successfully rendered a Handlebars template.

We have just looked at {{#each}} helper, but there are a lots of different helpers, such as :
-> {{#each}} {{/each}}
-> {{#each}} {{else}} {{/each}}
-> {{#if}} {{else}} {{/if}}
-> {{#with}} {{/with}}
-> {{#unless}} {{/unless}}

and better, you can write your own custom helpers, to make your templating process simpler.

That was a basic introduction to handlebars, hope you guys enjoyed it, in the next iteration we will dive deep, use some predefined helpers and create our own custom helpers, so stay tuned.

Thank you
Manoj Nama
Intelligrape software