I'm using Handlebars.js for client side view rendering. If Else works great but I've encountered a 3 way conditional that requires ELSE IF:
This doesn't work:
{{#if FriendStatus.IsFriend }} <div title=".ui-icon-mail-closed"><span></span></div>
{{else if FriendStatus.FriendRequested}} <div title=".ui-icon-check"><span></span></div>
{{else}} <div title=".ui-icon-plusthick"><span></span></div>
{{/if}}How do I do ELSE IF with handlebars?
18 Answers
Handlebars supports {{else if}} blocks as of 3.0.0.
Handlebars v3.0.0 or greater:
{{#if FriendStatus.IsFriend}} <div title=".ui-icon-mail-closed"><span></span></div>
{{else if FriendStatus.FriendRequested}} <div title=".ui-icon-check"><span></span></div>
{{else}} <div title=".ui-icon-plusthick"><span></span></div>
{{/if}}Prior to Handlebars v3.0.0, however, you will have to either define a helper that handles the branching logic or nest if statements manually:
{{#if FriendStatus.IsFriend}} <div title=".ui-icon-mail-closed"><span></span></div>
{{else}} {{#if FriendStatus.FriendRequested}} <div title=".ui-icon-check"><span></span></div> {{else}} <div title=".ui-icon-plusthick"><span></span></div> {{/if}}
{{/if}}I usually use this form:
{{#if FriendStatus.IsFriend}} ...
{{else}} {{#if FriendStatus.FriendRequested}} ...
{{else}} ...
{{/if}}{{/if}}Handlebars now supports {{else if}} as of 3.0.0.
Therefore, your code should now work.
You can see an example under "conditionals" (slightly revised here with an added {{else}}:
{{#if isActive}} <img src="star.gif" alt="Active"> {{else if isInactive}} <img src="cry.gif" alt="Inactive"> {{else}} <img src="default.gif" alt="default"> {{/if}}The spirit of handlebars is that it is "logicless". Sometimes this makes us feel like we are fighting with it, and sometimes we end up with ugly nested if/else logic. You could write a helper; many people augment handlebars with a "better" conditional operator or believe that it should be part of the core. I think, though, that instead of this,
{{#if FriendStatus.IsFriend}} <div title=".ui-icon-mail-closed"><span></span></div>
{{else}} {{#if FriendStatus.FriendRequested}} <div title=".ui-icon-check"><span></span></div> {{else}} <div title=".ui-icon-plusthick"><span></span></div> {{/if}}
{{/if}}you might want to arrange things in your model so that you can have this,
{{#if is_friend }} <div title=".ui-icon-mail-closed"><span></span></div>
{{/if}}
{{#if is_not_friend_yet }} <div title=".ui-icon-check"><span></span></div>
{{/if}}
{{#if will_never_be_my_friend }} <div title=".ui-icon-plusthick"><span></span></div>
{{/if}}Just make sure that only one of these flags is ever true. Chances are, if you are using this if/elsif/else in your view, you are probably using it somewhere else too, so these variables might not end up being superfluous.
Keep it lean.
2I wrote this simple helper:
Handlebars.registerHelper('conditions', function (options) { var data = this; data.__check_conditions = true; return options.fn(this);
});
Handlebars.registerHelper('next', function(conditional, options) { if(conditional && this.__check_conditions) { this.__check_conditions = false; return options.fn(this); } else { return options.inverse(this); }
});It's something like Chain Of Responsibility pattern in Handlebars
Example:
{{#conditions}} {{#next condition1}} Hello 1!!! {{/next}} {{#next condition2}} Hello 2!!! {{/next}} {{#next condition3}} Hello 3!!! {{/next}} {{#next condition4}} Hello 4!!! {{/next}} {{/conditions}}It's not a else if but in some cases it may help you)
0Built-in Helpers
#ifYou can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.
template
<div> {{#if author}} <h1>{{firstName}} {{lastName}}</h1> {{else}} <h1>Unknown Author</h1> {{/if}}
</div>When you pass the following input to the above template
{ author: true, firstName: "Yehuda", lastName: "Katz"
}Hello I have only a MINOR classname edit, and so far this is how iv divulged it. i think i need to pass in multpile parameters to the helper,
server.js
app.engine('handlebars', ViewEngine({ "helpers":{ isActive: (val, options)=>{ if (val === 3 || val === 0){ return options.fn(this) } } }
}));header.handlebars
<ul> <li ><a href="#">Home</a></li> <li ><a href="#">Trending</a></li> <li ><a href="#">People</a></li> <li ><a href="#">Mystery</a></li> <li> <input type="text" placeholder="Search..."> <button type="button"><i></i></button> </li> </ul>in handlebars first register a function like below
Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) { return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
});you can register more than one function . to add another function just add like below
Handlebars.registerHelper('calculate', function(operand1, operator, operand2) { let result; switch (operator) { case '+': result = operand1 + operand2; break; case '-': result = operand1 - operand2; break; case '*': result = operand1 * operand2; break; case '/': result = operand1 / operand2; break; } return Number(result);
});and in HTML page just include the conditions like
{{#ifEquals day "mon"}} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> //html code goes here </html> {{else ifEquals day "sun"}} <html> //html code goes here </html> {{else}} //html code goes here {{/ifEquals}}
