Getting Started with Handlebars JS

Handlebars js is a popular templating engine which is simple to use, powerful and has a large community based on the Mustache template language.

Using this, you can write cleaner code and separate the generation of HTML from the rest of your JavaScript. Written in JavaScript language, Handlebars JS is a compiler which takes any HTML or Handlebars expression and then compiles them to a JavaScript function.

The 3 main parts of Handlebars JS template are:

• Handlebars.js Expressions
• Data (or Context)
• The Handlebars Compile Function

Installation and Usage

Download the latest build from the GitHub project.

Handlebars is a JavaScript library, so you can include it in your web pages in a same way you would any other script:

// From File

<script type=”text/javascript” src=”handlebars.js” />

// From CDN <script src=”https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js”></script>

1. Templates

The syntax of template is very easy. This contains text and HTML, mixed with Handlebars expressions that is wrapped in double or triple curly braces {{}}. This expressions tell the Handlebars to include the value of variables or to execute helper functions and this templates need to be compiled before using.

HTML:

<script id=”name-template” type=”text/x-handlebars-template”>

<p>Hello {{firstname}} {{lastname}}.</p>

</script>

<div class=”name-placeholder”></div>

JS:

$(function () {

var theTemplateScript = $(“#name-template”).html();

var theTemplate = Handlebars.compile(theTemplateScript);

var context={ “firstname”: “John”, “lastname”: “Doe” };

var theCompiledHtml = theTemplate(context);

$(‘.name-placeholder’).html(theCompiledHtml);

});

OUTPUT:

Hello John Doe.

2. Expressions

Expression is the simplest dynamic element in a Handlebars template i.e. surrounded by handlebars, like {{expression}}. Handlebars escapes all the results of expressions by default, but using a “triple-stash {{{…}}}”, this will cause the expression to be output unescaped.

3. Context

One of the concept of Handlebar JS is context where the properties you include in curly braces are looked up.

HTML:

<script id=”name-template” type=”text/x-handlebars-template”>

{{#each user}} <p>{{firstName}} {{lastName}}</p>

{{/each}}

</script>

<div class=”name-placeholder”></div>

JS:

$(function () {

var theTemplateScript = $(“#name-template”).html();

var theTemplate = Handlebars.compile(theTemplateScript);

var context = { user: [ { firstName: ‘Alex’, lastName: ‘Cutts’ }, { firstName: ‘Chris’, lastName: ‘Hale’ }, { firstName: ‘Christopher’, lastName: ‘Harris’ }, { firstName: ‘Rosie’, lastName: ‘Lane’ }, { firstName: ‘Ross’, lastName: ‘Lloyd’ } ] };

var theCompiledHtml = theTemplate(context);

$(‘.name-placeholder’).html(theCompiledHtml);

});

OUTPUT:

Alex Cutts
Chris Hale
Christopher Harris
Rosie Lane
Ross Lloyd

4. Blocks

If you want to focus your work on a particular expression within a template, then you can use blocks on Handlebar JS. It is represented with the pound (#) symbol that is followed by an expression and ends with a closing mustache, {{/expression}}.

HTML:

<script id=”name-template” type=”text/x-handlebars-template”>

<ul> {{#users}} <li>{{name}} – {{../company}}</li> {{/users}} </ul>

</script>

<div class=”name-placeholder”></div>

JS:

$(function () {

var theTemplateScript = $(“#name-template”).html();

var theTemplate = Handlebars.compile(theTemplateScript);

var data = { users: [ {name: “Alex Cutts”}, {name: “Chris Hale”}, {name: “Christopher Harris”} ], company: “Google” };

var theCompiledHtml = theTemplate(data);

$(‘.name-placeholder’).html(theCompiledHtml);

});

OUTPUT:

Alex Cutts – Google
Chris Hale – Google
Christopher Harris – Google

5. Helpers

With Handlebar JS helpers, you can call JavaScript from your templates. This can help you to reuse code also. You can just use it as an expression like {{helpername}} or as a parameters like {{helpername 123}}.

HTML:

<script id=”name-template” type=”text/x-handlebars-template”>

<p> “{{title}}” published at {{formatDate date}} by {{author}} </p>

</script> <div class=”name-placeholder”>

</div>

JS:

Handlebars.registerHelper(“formatDate”, function(date){ return date.getDay() + “/” + date.getMonth() + “/” + date.getFullYear(); });

$(function () {

var source = $(‘#name-template’).html();

var template = Handlebars.compile(source);

var post = {author: “John Doe”, title: “John’s Life”, entry: “It is the power of the mind to be unconquerable.”, date: new Date(Date.now())};

var post_html = template(post);

$(‘.name-placeholder’).html(post_html); });

OUTPUT:

“John’s Life” published at 1/7/2016 by John Doe

For further reading, click here to see full of great documentation and examples.