Monday , 20 November 2017
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!

Paths

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.

Comments

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.

Conclusion

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.

http://handlebarsjs.com/

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link