Handlebars lets you build semantic templates similar to smarty or other templating engines.
Handlebars has been built just like Mustache http://mustache.github.io/ so if you have experience using Mustache then this will be very similar.

My code uses verion 1.0.0 so if you use my code, update your handlebars.js to the most recent version.
Full documentation available at http://handlebarsjs.com

My working example is

which can be downloaded at

How does it work:
2 javascript files are required.
handlebars.js – which compiles the template to the output.
jquery.js – or another library of your choice to inject your new content into your html.


You add multiple templates similar to this in your html:

<script id="centralTemplate" type="text/x-handlebars-template">
  <div class="central">{{contentSent}}</div>

So this is the template called centralTemplate, so for a header I would call it headerTemplate for example.


You setup each page on your site as a template which you can call and insert in your content.
You then use your own custom javascript to select your template and insert it to your page
var theData = {
contentSent: "Welcome to the Handlebars"
var contentTemplate = Handlebars.compile($("#centralTemplate").html());

I have created an object called theData and passed in that string.
I then compile the template I wish to use, in this case it is my centralTemplate, pass theData into it, then insert the output into the html.


You can precompile your Handlebars templates to save time on the client and reduce the required runtime size.
To do this you will need node js. Install instructions http://handlebarsjs.com/precompilation.html

My examples just use the handlebars.js file in the html to make my examples easy to copy



This content will be replaced with the content in the object contentSent.

Identifiers may be any unicode character except for the following:
Whitespace ! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~

With Handlebars to escape a value, use the “triple-stash”, {{{

So to add in html to your output you would change my example to

Block Expressions:

If you wish to loop through a record set you can do the following

Javascript object
var navigationData = [
{id: "0", name: "Home", selected: ""},
{id: "1", name: "About", selected: ""},
{id: "2", name: "User List", selected: ""}


Handlebars Paths



Nested Path

You can call elements in an object to get the returned value


There are 2 types of handlebar comments, neither will be displayed in the output
{{! }} or {{!-- --}}

Any comments that must contain }} or other other handlebars tokens should use the {{!– –}} syntax.
{{! This comment will not be in the output }}


Helpers are used to shorten your templates and making your output easier to manage

So simply by calling this helper it will add the 2 parts of the name together in the output

Author: {{fullName contentSent.author}}

Built-In Helpers


Shifts the context for a section of a template so no need to pass contentSent.author.firstName


Allows you to iterate over a list passed in

You can also use the {{else}} call if there are no results
To get the key of the element you can use {{@index}}


Just as you would in javascript, display one part of the content if something is valid, otherwise display a different output.


Similar to the if statement, but shows the element if it does not exist

And that is it. A javascript templating system for your website or web application.

Leave a Reply

Your email address will not be published. Required fields are marked *