How to use basic handlebars (handlebars.js)

Basic steps

In this article we will take a look at creating a basic handlebars file and making use of it in your html page. There are a few basic steps to use handlebars that we need to follow.

  1. Create the handlebars template file
  2. Get (or make up) data that will be used to populate the handlebars template
  3. Make sure to wrap the data in an opts where you can append the containerSelector (explained more below)
  4. Create a method that will do the injection of the data
    1. This method will also place the handlebars template onto your page

The code used in this article is simply for example purposes.

A full html page will be provided at the bottom for reference. For the sake of the example, all the code will be inside of the one html page; however you would likely want to have these components separated out as good coding practices dictate. When it comes to split out the code into different files, remember to include all the files in the main html page. An example will be shown at the bottom as well.

1. Create handlebars file

There are three things that can be noted here.

  1. We put an ID on the script tag – “handlebarsTemplateExample”. This will be used as our template selector which will be discuss below.
  2. We are creating HTML in the script tags (this is how handlebars works).
  3. We have this weird notation of “{{” and “}}”. These are variables which handlebars uses to bind information. Similar to AngularJS.

2. Get data for handlebars to inject

For this basic example we will simply make up some data. Ideally you would want to get this data from an ajax call or something similar.

3. Wrap data in opts

Since all of this is done in JavaScript it makes it easier for us to manage our code if we wrap all of our arguments into an “options” variable which is usually shortened to “opts”.

Opts is simply the parameters that we are going to be passing to the method. It is easier to say: “myMethod(opts)” if there are plenty of arguments that you want to pass to the method as opposed to: “myMethod(arg1, arg2, arg3….)”.

Making use of opts is also a better JavaScript practice as you can easily determine what each of the parameters are referring too. You can take a look at these two articles for more information on that (since this is a whole other discussion):

  1. http://stackoverflow.com/questions/12826977/multiple-arguments-vs-options-object
  2. http://stackoverflow.com/questions/4893642/javascript-passing-arguments-to-function

So let’s make the “wrapper”

In the above code block you will see that we have added templateSelector and containerSelector to our opts object.

  • templateSelector will be used to determine where we get our source from (i.e. the handlebars template)
  • conatinerSelector will be used to inject the result of the handlebars into a div on your page. This means that you would need to have a div (with an ID of “insertDataHere” (in this example) on your html page). You can see the full html page below if you are confused.

4. Create method to do handlebars injection

This is the final step to get your basic handlebars up and running. We will now make the basic handlebars injection method.

The code above is quite simple. Let’s break it down line by line.

This takes the html from the templateSelector and stores it in a variable called source. This would mean that it contains our html where we have defined: {{data.header}} and {{data.information}}.

Now that we have the basic handlebars “template” (inside source), let’s create the actual handlebars template by compiling the source. The result is stored in template.

This line is where the magic happens. Now that we have a compiled handlebars template we can send the template our data. The variable “data” must contain “header” and “information”. If it does not, these items will not be bound to the template. This matches the names that we gave our data injection variables between the “{{” and “}}” in our handlebars file.
Lastly we put our completed template (which is stored inside html as per the previous line; with its data injected in) inside of our div on the main html page.

You have now created a basic handlebars template and injected it into your html. Please see the below code for the full reference.

Full one page HTML

Remember you can also always download the files and not use the HTTP address for the script/s.

References to remember when splitting out files

Output

Here is a screen shot of the result

blog-handlebars-example

UPDATE/EDIT

Previously I had mentioned that you could extract the handlebars template out of the html file. Your external reference would look like this:

This will not work, because there is one thing that I forgot to mention. The extracted handlebars file needs to be inside of an HTML file. This is because a .js file does not register “<script>” tags.

This means that you would need to load the HTML page into your other HTML page. This is just a simple way of extracting the handlebars file out into another file; it is however not the most pleasant way of doing it. For the simplicity of this tutorial I would recommend that you rather keep the handlebars script in your HTML file and not split this into another file.

If you do wish to split it into another file this is how you would do so:

Furthermore, in your HTML page you will need to add the following

 

Leave a Reply

Your email address will not be published. Required fields are marked *