Basic syntax for Handlebars

The basic syntax for Handlebars is really quite simple. Let's assume the following JavaScript object is passed to a Handlebars template:

var model = {
  name: 'World'
};

The template file itself will contain the following markup:

<div>
  Hello {{ name }}!
</div>

This file would render to a browser in the following way:

Hello World!

Of course, there's a lot more that you can do than just this! Handlebars also supports conditional statements:

var model = {
  name: 'World',
  description: 'This will only appear because its set.'
};

<div>
   Hello {{ name }}!<br/><br/>
  {{#if description}}
     <p>{{description}}</p>
  {{/if}}
</div>

Using an if block helper as shown in the preceding code, you can check for truthy conditionals and only display HTML and/or data if the condition is true. Alternatively, you can use the unless helper to do the opposite, and display HTML only if a condition...