Handlebars Built In Helpers
May 8th, 2020 - written by Kimserey with .
Handlebars is a simple template engine which we can use to generate HTML content or other text format. Being very quick to use and understand makes it an ideal tool for projects needing the most common statements like conditions or loops. In today’s post we will look into Handlebars built in helpers with example.
Install
Handlebars can be install from npm:
1
npm install handlebars --save
Then we can simply use it as such:
1
2
3
const Handlebars = require("handlebars");
const template = Handlebars.compile("Test {{value}}");
console.log(template({ value: "Hello World!" }));
We import handlebars using Node require and then use #.compile([template]) to compile a template which we can then render by calling it directly passing the properties needed for the template. This example will display the following in the console:
1
Test Hello World!
The braces are used to indicate the Handlebars expressions, {{value}} will look for a value property in the current context.
Nested objects are also supported:
1
2
const template = Handlebars.compile("Test {{address.name}} {{address.postalcode}}");
console.log(template({ name: "kimserey", postalcode: "123" }));
And arrays using the #.[n] notation:
1
2
3
4
5
6
const template = Handlebars.compile("{{names.[1].value}}");
console.log(
template({
names: [{ value: "Hello" }, { value: "world" }],
})
);
Built-in Helpers
On top of accessing properties, Handlebars also comes with built-in helpers which provide conditional expressions.
if Helper
The support for if works as such:
1
2
3
4
5
6
const template = Handlebars.compile(`
{{#if condition}}
Hello World
{{/if}}
`);
console.log(template({ condition: true }));
each Helper
The other useful helper is each:
1
2
3
4
5
6
7
8
const template = Handlebars.compile(`
{{#each persons}}
{{name}} - {{age}}
{{/each}}
`);
console.log(template({ persons: [
{ name: "Kimserey", age: 32 }
]}));
This will print the following:
1
Kimserey - 32
each can also be used to iterate over properties:
1
2
3
4
5
6
const template = Handlebars.compile(`
{{#each this}}
{{@key}} - {{this}}
{{/each}}
`);
console.log(template({ name: "Kimserey", age: 32 }));
This will print the following:
1
2
name - Kimserey
age - 32
with Helper
The last helper we will be looking at is with which switches the context:
1
2
3
4
5
6
const template = Handlebars.compile(`
{{#with person}}
{{name}} - {{age}}
{{/with}}
`);
console.log(template({ person: { name: "Kimserey", age: 32 }}));
This allows us to not have to use access property simplifying the template.
Conclusion
Today we saw how to use Handlebars. We looked into if, else and with filters and how it could be used to render templates easily. I hope you liked this post and I see you on the next one.