{

Handlebar if-else helper examples| Conditional expression in handlebarJS


This tutorial covers a handlebar if help classes with examples, it also includes how to test conditional block execution in handlebar mustache templates.

HandlebarJS provides {{#if}} and {{#unless}}helper provides an helper to conditional test the expression against javascript objects.

if condition in handlebar helps to solve below things

  • Conditional to check an object is null or undefined or empty

if and unless are used to check properties of an object, not an expressions

{
  id: 1,
  name: "john",
  salary: 5000,
}

Here is an html template to check for name is null or undefined or empty

<div class="printname">
{{#if name}}
<h1>{{name}} {{salary}}</h1>
{{/if}}
</div>

It enables to render a block of code on condition is passed.

Please note that we have #if block followed by rendered block with end block.

if-else helper in handlerbarJS

Handlebar support if and else conditional block to render HTML templates It uses if and else helper classes to achieve that

Some times, We want to execute block on re

<div class="printname">
{{#if name}}
<h1>{{name}} {{salary}}</h1>
{{else}}
<h1>No Employee found</h1>
{{/if}}
</div>

if the name is found, It executes a block inside it otherwise it executes the else block.

else if helper in handlerbarJS

Nested if inside else can be used in handlebar JS from version 3. x.

Here is a syntax

{{#if isAdmin}}
  ...
{{else}} {{#if isHr}}
  ...
{{else}}
  ...
{{/if}}
{{/if}}

How to use if in for loop with handlebarjs

Sometimes, while iteration an array of json objects, We want to check conditional if expression.

Here is an example to check if inside for each iteration.

[{
  "id":1,
    "name":"John",
    "salary":5000,
 },{
  "id":2,
    "name":"Franc",
    "salary":4000,
 },{
  "id":3,
    "name":"Ram",
    "salary":9000,
 }]

if helper checks each object name value found, if not else block is executed.

{{#each this}}
  {{#if this.name  }}
<div>Name Found </div> {{/if}}
{{else}}
  <div>There are no Roles.</div>
{{/each}}

How to add multiple conditions if helper in handlebarJS?

In javascript, We can have multiple conditions in if using && operator

if( condition1 && condition2){
  //if code
}else {
  // else code
}

In handlebars There is no And , or operator in handlebarsJS, But we can achieve the same with either nested if helper or custom helper we can replace the above with nested if helper classes

{{#if condition1}}
  // condition1 code
  {{else if condition2}}
    //condition2 code
  {{/if}}
{{/if}}

Let’s see customer helper achieve and, or operators.

here is an code for handlbarJS and operator example

Handlebars.registerHelper('isAnd', function(cond1, cond2, options) {
    return (cond1 &&  cond2) ? options.fn(this) : options.inverse(this);
});

Below is usage of and operator in handlebar template

{{#isAnd condition1  condition2}}
{{! multiple conditions and satisfied}}
{{else}}
{{! multiple conditions and not satisfied}}
{{/isAnd}}

Let’s write a code for handlbarJS OR operator example

Handlebars.registerHelper('isOr', function(cond1, cond2, options) {
    return (cond1 || cond2) ? options.fn(this) : options.inverse(this);
});

Below is usage of or operator in handlebar template

{{#isOr condition1  condition2}}
{{! multiple conditions not satisfied}}
{{else}}
{{! multiple conditions not satisfied}}
 
{{/isOr}}

How to compare two strings are equals or not

Sometimes, We want to check if a given two strings are equal are not.

We can use the === operator for comparing strings or any primitive types.

There is no Inbuilt comparison operator in handlebars, However, We can write a custom helper javascript to achieve this.

For example, let’s have a json object

{
  numbers: ["one", "two","three"],
username:"john"
isAuthenticated:true
}

Write a helper function to check a strings comparison -compareStrings.

This helper checks for two things

  • Handlebars if not an equal condition with string
  • Compare two strings are equal or not
Handlebars.registerHelper('compareStrings', function(p, q, options) {
    return (p == q) ? options.fn(this) : options.inverse(this);
});

Let’s use this helper in handlebar template

<div>
{{#compareStrings username "john"}}
 
<div> Equal</div>
{{else}}
<div> Not Equal</div>
{{/compareStrings }}
</div>

Generated Html output

<div>
<div> Equal</div>
</div>

Conclusion

In this tutorial, You learned how to do conditional if-else logic helper in Javascript template examples with handlebarJS.

  • if-else helper
  • nested if-else
  • multiple conditions in if the helper
  • if string equal comparison
  • handlebarjs and operator
  • handlebarjs or operator
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.