Handlebars.js An Overview
by Prabhat Rai

In my last blog we understood the importance of Client Side Templating. In this blog I am going to explain the basics of Handlebars.js. Lets get started.

Handlebars.js was started by Yehuda Katz. It is built upon mustache, which is logic-less. Logic-less here means that there are no logical statements (If-else,switch etc) but in mustache you can check the truthfulness of a variable. For ex :

{{#isDirty}}

    foo

{{/isDirty}}

{{^isDirty}}

    bar

{{/isDirty}}

It can  be read in general as

if isDirty

    foo

else

    bar

You can check a variable if its set or not but apart from that no logic can be applied.

if (age >= 18 && age  <= 50)

This can not be evaluated by mustache. So, logic-less template is a template that contains holes for you to fill, and not how you fill them. The logic is placed elsewhere and mapped directly to the template. This separation of concerns is ideal because then the template can be easily built with different logic, or even with a different programming language. If you prevent logic in templates by design (like mustache does), you will be obliged to put the logic elsewhere, so your templates will end up uncluttered.

Another advantage is that you are forced to think in terms of separation of concerns: your controller or logic code will have to do the data massaging before sending data to the UI. If you later switch your template for another (let’s say you start using a different templating engine), the transition would be easy because you only had to implement UI details (since there’s no logic on the template)

Yehuda Katz was a member in mustache also, he liked the idea of logic-less templating but as a developer he wanted to see more feature but without breaking the ground rule of Mustache, i.e. logic-less templating. So he came up with the idea of Handlebars.js. Handlebars.js is a semantic template. Semantic JavaScript templates are used as a replacement to constructing long strings of HTML within your JavaScript logic, or even dynamically creating elements and filling them as you go, which violates the principle of Separation of Concerns.

The main difference between Mustache.js and Handlebars.js is that Mustache is the actual templating system, while Handlebars just extends that system and adds in some extra features. What are those extra features we will see in the upcoming blogs.

So lets take an example and understand basic of handlebars.

Lets say your Data is of the below format,

var data = {

     "name": "ABC",

     "sex": "M",

     "address": "Delhi",

     "Phone": "9999999999"

 }

You design your template like this.

<ul>

     <li>{{name}}</li>

     <li>{{sex}}</li>

     <li>{{address}}</li>

     <li>{{phone}}</li>

</ul>

In each template you define you must include the type as “text/x-handlebars-template”. It tells that the content of the script tag is a handlebar template. In the template you must be noticing {{}}. These are called the mustaches and they specify that it contains Handlebar Expression. Why they are called mustache, if you look at the curly braces  by rotating it 90 degree clockwise it will look like a mustache and the name handle bars comes from the type of mustache it looks like.  So if we look at the template we are stating all the attributes of the data variable like name, sex etc these are the holes that will be filled by the data passed to the template.

Then do this

// Get the HTML of your template

var template = $('#myTemplate').html();

// Prepare the compiled template function

var compiledTemplate = Handlebars.compile(template);

// Pass the data to your compiled template function

var result = compiledTemplate(data); 

The first line gets the HTML of the template. Second line takes that HTML compiles it with Handlebars and generates a function (compiledTemplate). This function then takes the data as its argument and generates the HTML string.

The result will contain this,

<ul>

    <li>ABC</li>

    <li>M</li>

    <li>Delhi</li>

    <li>9999999999</li> 

</ul>

You have the HTML string with you now, you can append it to any DOM element now.

In the next blog we will see more featurs of Handlebars.

Till then – Happy Coding 🙂