If you work with Handlebars long enough, you’ll start to notice a very annoying gap in its capabilities: conditionals. Now, Handlebars does come with a conditionals helper that simply tests whether or not the passed in value is truthy or not and acts accordingly. While this is fine for a good portion of scenarios, I guarantee there will come a time where you need a more robust solution. Today, we’re going to go over three conditional helpers that handlebars is lacking and how to make them yourself.

## EqualTo

Handlebars.registerHelper('ifequal', function(value1, value2, options) {
if(value1 === value2) {
return options.fn(this);
}
return options.inverse(this);
});

## LessThan and LessThanOrEqual

Handlebars.registerHelper('iflessthan', function(value1, value2, options) {
if(value1 < value2) {
return options.fn(this);
}
return options.inverse(this);
});

Handlebars.registerHelper('iflessthanorequal', function(value1, value2, options) {
if(value1 <= value2) {
return options.fn(this);
}
return options.inverse(this);
});

If you need additional functionality (e.g., greater-than-or-eaual-to or not-equal-to), you can easily figure out what needs to be done given the examples provided. If you don’t feel like creating individual helpers for each kind of conditional, I found this really cool snippet on StackOverflow that may come in handy:

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
switch (operator) {
case '==':
return (v1 == v2) ? options.fn(this) : options.inverse(this);
case '===':
return (v1 === v2) ? options.fn(this) : options.inverse(this);
case '<':
return (v1 < v2) ? options.fn(this) : options.inverse(this);
case '<=':
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
case '>':
return (v1 > v2) ? options.fn(this) : options.inverse(this);
case '>=':
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
case '&&':
return (v1 && v2) ? options.fn(this) : options.inverse(this);
case '||':
return (v1 || v2) ? options.fn(this) : options.inverse(this);
default:
return options.inverse(this);
}
});

You use it like this:

{{#ifCond var1 '==' var2}}