JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<script id="Template" type="text/template">
<div>
{{#if_eq val1 val2}}
<p>IF Branch</p>
{{else if_eq val2 val3}}
<p>ELSE IF Branch</p>
{{else}}
<p>ELSE Branch</p>
{{/if_eq}}
</div>
</script>
JavaScript
// https://stackoverflow.com/q/47681668/3397771
const raw = document.getElementById('Template').innerHTML;
const template = Handlebars.compile(raw);
const data = {
val1: 'foo',
val2: 'foo',
val3: 'bar'
};
Handlebars.registerHelper('if_eq', function () {
const args = Array.prototype.slice.call(arguments, 0, -1);
const options = arguments[arguments.length - 1];
const allEqual = args.every(function (expression) {
return args[0] === expression;
});
return allEqual ? options.fn(this) : options.inverse(this);
});
document.body.innerHTML = template(data);