How to use Handlebars

Nowadays websites rely more and more on JavaScript to create dynamic interfaces, for some sites you may only need something like jQuery that works wonders when it comes to DOM manipulation but other times a template system may be more suitable, especially if your page will be constantly updating its data.

Handlebars helps you with that by dynamically generating your HTML. It helps you get into using the View/Controller pattern while keeping your code cleaner and more maintainable.

Using Handlebars

The first thing we need to do in order to start using Handlebars is to install it and doing that is really simple; all we need to do is link to the handlebars js file like so:

<script src="js/handlebars.js"></script>

Handlebars is now ready to be used on the page.

The way handlebars works is that it generates HTML content from JSON data. In order for the browser to recognize a chunk of script as a Handlebars template we need to give it the type of text/x-handlebars-template and also an ID in order to reference it later. The markup for creating a simple template that will get someone’s name from JSON data and show it in your HTML is:

<ul class="updates">
   <script id="template" type="text/x-handlebars-template">
      <li>
	  <h2>{{name}}</h2>
      </li>
   </script>
</ul>

Where we placed the {{name}} is where the fetched property from the JSON data structure will be placed. If we test this now we get nothing on the page, because we need to tell Handlebars what to place in there like so:

var data = {
   name : 'John Doe'
},

All we’ve done so far was create a simple JSON object that only contains one property called name and the value of John Doe and this value is what we want to place in the HTML but before that we need to compile the code we just created and append it to the HTML and for that we use:

var template = Handlebars.compile( $('#template').html() );
$('.updates').append( template(data) );

What I did in this code was compile whatever HTML was inside the template script tag and then append it to the updates unordered list passing data as a parameter because that is the name I gave our JSON object. We can of course add more properties to our JSON object to place them on the page, I will add an update property that will contain what the user has written in his update, where it was sent from and also the user’s location if it’s available. So let’s add these parameters to our data object:

   var data = {
      name: 'Jane Doe',
      update: 'Just Made my Breakfaast',
      from: 'Web',
      location: 'Canada'
   },

 Now in order to place these new parameters on our page we need to update our HTML like so:

<li>
   <h2>{{name}}</h2>
   <p>{{{update}}}</p>
   <span>
      Sent From: {{from}} - In: {{location}}
   </span>
</li>

 As you can see handlebars works in a very simple manner and this is fine for now but what if we want to add more than one user to our JSON object, like so:

var data = { updates: [
   {
      name: 'Jane Doe',
      update: 'Just Made my Breakfaast',
      from: 'Web',
      location: 'Canada'
   },
   {
     name: 'John Doe',
     update: 'What is going on with the weather?',
     from: 'Phone',
   }
]},

 If after we place an array inside our JSON object and we try to reload the page we can see that we are not getting our two users, in fact we’re not getting anything besides the HTML that is not generated by Handlebars. Much like PHP, in order to move through an array we need to use the each statement and in handlebars this is a really simple procedure. We need to place the each statement before any generated HTML in our page and close it after all the generated HTML like so:

{{#each updates}}
    <li>
       <h2>{{name}}</h2>
       <p>{{{update}}}</p>
       <span>
          Sent From: {{from}} - In: {{location}}
       </span>
    </li>
{{/each}}

If you try reloading now you see that you get both the users in different list items.

One problem with our code is that John Doe does not actually provide us with his location but we still render the “- In:” and after that we have a blank space. This happens because we didn’t check for the existence of a location and we can do that using handlebars if statement, like so:

{{#each updates}}
   <li>
      <h2>{{name}}</h2>
      <p>{{{update}}}</p>
      <span>
         Sent From: {{from}} 			
         {{#if location}}
	    - In: {{location}}</span>
         {{/if}}
     </span>
   </li>
{{/each}}

 Now you can see that if we don’t set a location for the user none of the HTML will be rendered and that is exactly what we want. We can also have a message saying that this user did not provide his location by using and else statement like so:

{{#if location}}
   - In: {{location}}</span>
{{else}}
   - Location not provided by the user</span>
{{/if}}

Conclusion

We’ve only covered a small fraction of what Handlebars is capable of. Hopefully you can see what a great option this is for apps, where data is constantly changing.

If you like the sound of Handlebars I definitely recommend you check out tryhandlebarsjs.com.

Have you used Handlebars in a project? Which of its features do you like the most? Let us know in the comments.