Handlebars


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
http://glynrob.com/examples/handlebars

which can be downloaded at
https://github.com/glynrob/handlebars

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.

HTML

You add multiple templates similar to this in your html:

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

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

Javascript

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());
$("#central-placeholder").html(contentTemplate(theData));

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.

Precompile

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

Parts:

Expressions:

{{contentSent}}
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
{{{contentSent}}}

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: ""}
];

Template
{{#navigation}}
{{name}}
{{/navigation}}

Handlebars Paths

Simple

{{name}}

Nested Path

{{contentSent.mainData}}
You can call elements in an object to get the returned value

Comments

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

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

WITH

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

EACH

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}}

IF + ELSE

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

UNLESS

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 *