DJ Quilter

Front-End Developer

A Crash Course in Handlebars

Handlebars brings CMS-like functionality to front-end web development. I’ve found that you can get this working very quickly with a little bit of HTML and some very basic Javascript.

The HTML below provides an empty table and a Handlebars template which sits within a script tag. Because the template is within the script tag, it’s contents won’t appear in your markup, but you can still access it with Javascript. In the example below, it is used to insert data into a table:

<script id="player-template" type="text/x-handlebars-template">
  <tr class="player">
    <td>{{name}}</td>
    <td>{{team}}</td>
    <td>{{position}}</td>
    <td>{{nationality}}</td>
  </tr>
</script>

<table class="all-players">
  <thead>
    <tr>
      <td>Name</td>
      <td>Team</td>
      <td>Position</td>
      <td>Nationality</td>
    </tr>
  </thead>
  <tbody>
    <!-- To be filled by Handlebars -->
  </tbody>
<table>

Notice the strange bits in the script block above. These are effectively placeholders which Handlebars uses to work out where it should put the data that we give it.

This data is in a model, which is our next bit of code. The model is in the form of some JSON.

var model = {
  "name": "Messi",
  "team": "Barcelona",
  "position": "Forward",
  "nationality": "Argentine"
};

Assuming you’ve already included Handlebars (and jQuery) on your page, you then just need to run the following Javascript to compile everything:

var source = $('#player-template').html();
var template = Handlebars.compile(source);
var html = template(model);
$('.all-players tbody').append(html);

The above code gets the markup in the script tag, gives to to Handlebars, which applies the data within the model. The final line simply adds it to the DOM.

You can copy and paste the above code, and when you run it, you’ll see Messi’s info pop up in a table.

Adding More Data

That’s nice and all, but it’s a VERY simple example of how to get Handlebars working. What about if you want to have that CMS-like functionality which I mentioned at the start?

This is where you can use Handlebars’ each helper, which allows you to iterate over an Object or Array within your model. Below we’ve got a new Handlebars template and a new model.

<script id="player-template" type="text/x-handlebars-template">
  {{#each players}}
  <tr class=”player”>
    <td>{{name}}</td>
    <td>{{team}}</td>
    <td>{{position}}</td>
    <td>{{nationality}}</td>
  </tr>
  {{/each}}
</script>

Notice the additional Handlebars placeholder, which contain the each helper. We’re asking Handlebars to go through each record in the players variable within the model:

The players variable has been added to the model as an Object which contains a record for each player:

var model = {
  players: {
    "ronaldo": {
      "name": "Ronaldo",
      "team": "Real Madrid",
      "position": "Forward",
      "nationality": "Portuguese"
    },
    "messi": {
      "name": "Messi",
      "team": "Barcelona",
      "position": "Forward",
      "nationality": "Argentine"
    }
  }
};

If you update the previous code with these two additions, you should now have a table with two players.

Changing Your Model

If you wanted to change your table (either add, edit or remove records), you can do that by editing the JSON directly, and then re-run Handlebars.

Just remember to clear out your table every time you recompile your model, otherwise you’ll just end up adding all of the records onto the end of the ones that are already there (including duplicates)!

A Little Aside: jQuery? Really?!

The examples above (and all of the examples of the Handlebars website) use jQuery, but we don’t actually need to. The code below runs Handlebars without needing to resort to it:

var source   = document.querySelector('#player-template’).innerHTML;
var template = Handlebars.compile(source);
var html    = template(model);
var container = document.querySelector('.all-players tbody’);
container.innerHTML = html;

Not a great deal different really.

Conclusion

This just brushes the surface of what you can do with Handlebars, but it should get you up and running pretty quickly!