DJ Quilter

Front-End Developer

Handlebars Helpers

Handlebars can take data from a JSON model and output it on your web page dynamically, but you can also use Handlebars Helpers to modify that data in interesting ways.

In A Crash Course in Handlebars, we used a football themed model and had Handlebars create a table from that. We’re going to use a similar set of markup and data here:

<script id="player-template" type="text/x-handlebars-template">
  {{#each players}}
  <tr>
    <td>{{name}}</td>
    <td>{{team}}</td>
    <td>{{goals}}</td>
    <td>{{shots}}</td>
    <td></td>
  </tr>
  {{/each}}
</script>

<table class="all-players">
  <thead>
    <tr>
      <th>Name</th>
      <th>Team</th>
      <th>Goals</th>
      <th>Shots</th>
      <th>Accuracy</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
<table>
var model = {
  players: {
    "ronaldo": {
      "name": "ronaldo",
      "team": "Real Madrid",
      "goals": 3,
      "shots": 4
    },
    "messi": {
      "name": "messi",
      "team": "Barcelona",
      "goals": 4,
      "shots": 4
    },
    "suarez": {
      "name": "suarez",
      "team": "Barcelona",
      "goals": 1,
      "shots": 5
    },
    "bale": {
      "name": "bale",
      "team": "Real Madrid",
      "goals": 2,
      "shots": 3
    }
  }
};
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;

Our model includes a similar information, the Javascript that runs Handlebars is identical (notice no need to use jQuery) and the template/HTML is slightly different to account for the new information that we’re going to get Handlebars to output.

Running the above code would output the following table:

Name Team Goals Shots Accuracy
ronaldo Real Madrid 3 4
messi Barcelona 4 4
suarez Barcelona 1 5
bale Real Madrid 2 3

Why use Helpers?

Handlebars Helpers provide us with the means to format, calculate and generally play with the data that we have.

You might ask why we don’t just change the model, but there are situations where you don’t control the data in your model. If you’re using an someone else’s API, you have to work with what you’re given, and that’s when Handlebars Helpers become really useful.

In this example, because I’m quite OCD about punctuation, I’d quite like the player’s names to be capitalised. And the accuracy column is empty because, although we have the data to work out the value, we haven’t got the actual value to output. So we’re going to fill that column in.

Creating your Helper

First things first, let’s deal with my OCD. Creating your Helper is fairly easy. The following code goes in your Javascript file.

Handlebars.registerHelper('capitalise', function(player) {
  var capital = player.substring(0, 1).toUpperCase();
  var length = player.length;
  var result = capital + player.substring(1, length)
  return result;
});

The Helper is hooked up to a function that, in this case, takes a single parameter, which is the player’s name. The function itself isn’t hugely complicated; we’re just going to take the players name, remove the first letter, capitalise it, add it back on and return the result.

To make use of the Helper, we need to update our HTML. Specifically, we need to update the Handlebars placeholder which is in the script that holds our template:

<script id="player-template" type="text/x-handlebars-template">
  {{#each players}}
  <tr>
    <td>{{capitalise name}}</td>
    <td>{{team}}</td>
    <td>{{goals}}</td>
    <td>{{shots}}</td>
    <td></td>
  </tr>
  {{/each}}
</script>

Notice the addition of the name variable which populates our parameter when we make the call to our new Helper.

Practice makes perfect

In a similar way, we can use the following Helper to populate the accuracy column, effectively creating new information:

Handlebars.registerHelper('accuracy', function(goals, shots) {
  var accuracy = Math.floor((goals / shots) * 100) + '%';
  return accuracy;
});

Again, we need to update Handlebars template:

<script id="player-template" type="text/x-handlebars-template">
  {{#each players}}
  <tr>
    <td>{{capitalise name}}</td>
    <td>{{team}}</td>
    <td>{{goals}}</td>
    <td>{{shots}}</td>
    <td>{{accuracy goals shots}}</td>
  </tr>
  {{/each}}
</script>

The only difference to note here is the addition of another parameter, but it’s worth looking at this Helper, because it does something different to the last one. Rather than altering data we’ve been given, we’re creating new information.

And the final table provided by Handlebars:

Name Team Goals Shots Accuracy
Ronaldo Real Madrid 3 4 75%
Messi Barcelona 4 4 100%
Suarez Barcelona 1 5 20%
Bale Real Madrid 2 3 66%

The Helpers here have been very simple, but hopefully they show the potential for powerful data manipulation that you get from Handlebars.