Creating templates with Handlebars.js

While working through a recent lab and project at The Flatiron School, I was introduced to the Handlebars.js library. This allows you to build semantic templates in your HTML that work along with JavaScript to quickly render a lot of HTML with just a little bit of code. The basic building block of Handlebars is an expression.

Expressions are noted in the ‘mustache’ syntax of ‘{{ }}’.

There are just a few steps necessary to get things up and running with Handlebars. First, you must create your template in the HTML file. This is created in a standard <script> tag and is a combination of HTML and Handlebar expressions. The template can have any id that you want but the type must be “text/x-handlebars-template” otherwise the script tag will be rendered as JavaScript.

An example of a Handlebar template.

In this example, I’ve created the ‘greeting-template’ template and added some HTML and a two Handlebar expressions.

The next step is to write the necessary JavaScript. This code will contain references to the template along with the context object which is the source of the data being passed to the template. This object can be either a JavaScript literal object or a jQuery object. The third step is to pass the HTML to the Handlebars.compile() function. Then, the you pass the data context to the template. And finally, you add the compiled HTML to the DOM. Here is a shot of these steps written out in JavaScript:

JavaScript needed for a Handlebars context object and complied HTML.

What this code does is to grab the .innerHTML of the template, pass it to Handlebars.compile(), creates a context object, and then passes that object to the compiled HTML template.

The result of running this code is this:

The result of the template being passed the compiled HTML which was passed data from the context object.

This is all well and good, but with this simple example maybe not so impressive. One of the other things that Handlebars includes are ‘helper’ expressions and one of these ‘helpers’ is the #each expression. This works just like a forEach loop in JavaScript. You add this to your template and then when you feed the template a series of Objects, the #each expression will iterate through each item and display information about it on the page.

Here is a more complex ‘songListTemplate’ which will output an artist and the list of that artist’s top tracks according to the Spotify API.

A Handlebar template that will output a list of songs.

One quirk about Handlebars is that it doesn’t like the [0] notation that you would normally use to get to an index of an array. Instead, it uses .0. as you can see in line 17 of the above code.

API call to Spotify. jQuery for getting the data from the API call to the Handlebar template.

Here is an AJAX API call to Spotify along with some jQuery to compile the Handlebar template together and append it to the DOM. The steps here are the same as before; I am getting the HTML from the template, adding that HTML to the compile function, adding in the context object and then appending that to the DOM.

The result of this template:

The DOM after the Handlebar template has added its data.

As you can see, with just a few lines of code, I now have a reusable template that I can feed data too and have it consistently append that data to my DOM.