Tuesday , 24 October 2017
Home / Programming / JavaScript / Built-in Helpers – Handlebars.js Tutorial
Built-in Helpers
Built-in Helpers

Built-in Helpers – Handlebars.js Tutorial

Handlebars comes with built-in helpers to make executing complex logic simple. They’re conditionals and loops. Let’s take a look at some of the built-in helpers that come with it.

#Each Helper

Right now, it’s required that we hard code each menu item in our HTML document, but what if the list was updated? Looping through a menu list is easier than typing each name and link. Let’s update our template to this.

Our template was greatly reduced to a few simple lines. The #each expression is a built-in helper from handlebars. You have to type #each before the object or array name in order for it to work. To close our loop, you use the same name, but with a forward slash. It basically loops through an array. However, we don’t have an array called menu. So, let’s update our menuData variable to this.

We now have a property called menu. This property contains an array of objects. Each time the #each loop runs, then it’ll go through each object. From there, we can then use each property inside each object in the array.

#If Helper

There are conditional helpers in handlebars. However, they don’t work EXACTLY like conditional statements like most programming languages. They just check whether or not an object or property is empty. If it is, then the code wrapped inside the #if block isn’t executed. If it is, then the code runs. Let’s update our template to this.

We wrap our #each loop with the #if condition.  Inside our menuData, we search for the menu property. Handlebars will look for this property and makes sure it has a value. If you refresh your page, you should see your menu still displaying.  There is also an else helper. Let’s go to our script and update our menuData variable to this.

As you can see, we just empty it. Now, let’s update our template to use the else helper.

You’ll notice we don’t have to type the # before the else condition. Also, unlike most programming languages, Handlebars requires that the else condition is placed inside the #if condition before closing it. This is how handlebars reads our template.

If the menu property is declared and contains values, then it’ll execute our loop, else display that there is no menu.

#unless Helper

The #unless helper works like the #if helper. Except, it checks for a false value. Let’s see how this works. Update your template to this.

If you refresh your page, then you should see this message displayed. Unlike our #if condition, the #unless condition searches for the menu property. If it doesn’t exist, then this block of code executes. If it does find menu, but menu is empty, then it’ll also execute this block of code.

#with Helper

The #with helper is a special kind of helper. In some situations, you may have nested objects. Handlebars handles only the current object. To access objects inside of an object, you would use dot notation. However, the #with helper can simplify this process. Let’s update our template to this.

Let’s update our menuData variable to this.

As you can see, the titles property contains an object. To access the properties of this object you would do something like this {{titles.main}}. With the #with helper however, you just specify the property with the object and then handlebars changes it’s scope to that property. Now, you can just access that object’s properties by their names instead of using dot notation. It’s almost like a loop except for objects and it doesn’t bother looping through multiple objects.

Conclusion

The #with helper is one of those things you won’t use often. We’ll soon learn about paths and how they can be useful in another tutorial. In the next tutorial, we’ll discuss how to create our own custom helpers. More information about Handlebars can be found 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