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 that really have a need, out of those there are Handlebars.
The Handlebar is a templating engine that renders data onto templates, ready to display to the end-user. 

Handlebars templates are really simple, as they all are just HTML markup, which is 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 quotes, 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 an array of objects to iterate over, the data can come from anywhere, we have hardcoded it for demonstration 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 the body, and Ta-da we have successfully rendered a Handlebars template.  

We have just looked at {{#each}} the helper, but there are a lot 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.