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 is falsey:
var model = { name: 'World...