Handlebars : A step ahead

In the previous blog on Handlebars, we learnt the basic concept of handlebars and how to use them in your web applications. Now we will extend our knowledge, a bit more and see how we can use and create helper methods in handlebars to have more flexibility on data.

Predefined/Built-in Helper methods: There are a number of built in helper methods defined in Handlebars and some of them are discussed below:

1) if block helper : This block is basically used to render a block conditionally. If its argument returns false, undefined, null, “” or [] (a “falsy” value), Handlebars will not render the block and if it returns true, then only it will render the block. You can also specify an else section that will be rendered in case if returned false.

<div>
{{#if username}}
<h1>Hello {{username}}!!</h1>
{{else}}
<h1>Hello anonymous user!!</h1>
{{/if}}</div>

2) unless block helper : The unless helper is just the inverse/opposite of if helper i.e it renders the block when its argument returns a false value.

<div>
{{#unless isLogin}}
<h1>Please Login first !!</h1>
{{/unless}}
</div>

3) each block helper : The each helper is used to iterate over each item of list.

Let say we have a list like :

{ city: [
{name: 'new delhi'}.
{name: 'noida'},
{name: 'gurgaon'}
] }

To iterate over each element of the above list. Use each helper like below:

<ul>
{{#each city}}
<li>{{name}}</li>
{{/each}}
</ul>

The above code will result in:

<ul>
<li>new delhi</li>
<li>noida</li>
<li>gurgaon</li>
</ul>

Custom Helper methods: There can be some situation where the built in methods are not enough for the use case. In such scenarios we can easily write our own custom helper methods in handlebars using Handlebars.registerHelper method.

Let me give you a scenario of my current project where we needed a helper method that should return a boolean value based on the operator used between two operands eg: Operand1 ‘===’ Operand2 if equal should return true otherwise false.

Handlebars.registerHelper('ifCond', function (v1, operator, v2, opts) {
                var isTrue = false;
                switch (operator) {
                     case '===':
                        isTrue = v1 === v2;
                        break;
                    case '==':
                        isTrue = v1 == v2;
                        break;
                    case '!==':
                        isTrue = v1 !== v2;
                        break;
                    case '<':
                        isTrue = v1 < v2;
                        break;
                    case '<=':
                        isTrue = v1 <= v2;
                        break;
                    case '>':
                        isTrue = v1 > v2;
                        break;
                    case '>=':
                        isTrue = v1 >= v2;
                        break;
                    case '||':
                        isTrue = v1 || v2;
                        break;
                    case '&&':
                        isTrue = v1 && v2;
                        break;
                }
                return isTrue ? opts.fn(this) : opts.inverse(this);
            });

In above example, we have created a helper method named ‘ifCond’ which when used with two operands and an operator(any of the above mentioned) between them returns a boolean value.
You can use this helper method in your template as follows:

        
		<h1>
			{{#ifCond name '===' 'admin'}}
			Hello admin!!
			{{else}}
			Hello user!!
			{{/ifCond}}
		</h1>
	
        

So, if value of name variable is ‘admin’ then above code will show Hello admin!! on web page otherwise Hello user!!

That’s how custom helper methods can be created in handlebars according to your own need and requirements. Hope this helps.

Rishabh Dixit