Tuesday , 18 June 2019
Home / Programming / JavaScript / Paths and More Expressions – Handlebars.js Tutorial
Paths and More Expressions
Paths and More Expressions

Paths and More Expressions – Handlebars.js Tutorial

In this last tutorial, we’ll talk about paths and more expressions. So far, we’ve been dealing with plain text, but what if we had HTML inside our strings? Handlebars will naturally escape these values to prevent XSS injections. However, you can stop Handlebars from doing so simply by using 3 staches. Update your menuData variable to this.

Let’s update our template to this.

If you refresh your page, then you will see our info property escaped and displayed the same way we wrote it. We don’t want this. We want the <strong> tags to bold our message. Update the expression to this.

By using 3 staches on each side, then Handlebars will not escape the value and use it as is!


Handlebars supports paths. Let’s say our menuData variable had a nested object like so.

You would simply use dot notation inside our expression like so.

You can also go back one by using the ../ path before the property name. Update your menuData variable to this.

Next, let’s update the template to this.

Refersh your page and you should see the name Jack Brians outputted. Even though we’re in a loop, we can still access the properties outside of this object by using the ../ path.


To create comments for your code, then you just insert a ! before your expression like so.

You can write whatever you want in here. It will not be outputted into your document. You can use regular HTML comments, but handlebars supplies you with their comment system just in case you need it.


Handlebars is a pretty powerful JavaScript templating system. It’s actually the most popular templating system out there. To learn more about handlebars, then check out the main website here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.