Looking for a specific post? Checkout the Blog Index.

By Kimserey Lam with

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.

External Sources

Designed, built and maintained by Kimserey Lam.