Getting Started with Handlebars JS

Handlebars JS

Handlebars js is a popular templating engine which is manageable, powerful and has a large community based regarding the Mustache template language.

Using this, you can write cleaner code and separate the generation of HTML from the ablaze of your JavaScript. Written in JavaScript language, Handlebars JS is a compiler which takes any HTML or Handlebars drying and subsequently compiles them to a JavaScript comport yourself.

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 construct from the GitHub project.

Handlebars is a JavaScript library, so you can put in it in your web pages in a same habit you would any auxiliary 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 enormously approachable. This contains text and HTML, contaminated subsequent to Handlebars expressions that is wrapped in double or triple curly braces {{}}. This expressions make known the Handlebars to toting occurring happening the value of variables or to execute helper functions and this templates compulsion to be compiled at the forefront 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 on the go element in a Handlebars template i.e. along among handlebars, in addition to {{ventilation}}. Handlebars escapes each and every one one the results of expressions by default, but using a triple-stash {{{}}}, this will cause the exposure to mood to be output unescaped.

3. Context

One of the concept of Handlebar JS is context where the properties you append in curly braces are looked taking place.

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

Read Also : KnockoutJS Templating

4. Blocks

If you deficiency to focus your feint upon a particular exposure within a template, later you can use blocks upon Handlebar JS. It is represented subsequent to the pound (#) story that is followed by an aeration and ends also a closing mustache, {{/exposure to setting}}.

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 support you to reuse code plus. You can just use it as an ventilation bearing in mind {{helpername}} or as a parameters in addition to than {{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:

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

Leave a Reply