JSFiddle - React, Tailwind, and code Playground

by 76484

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}}
  </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: 'bar',
  val3: 'bar'
};

Handlebars.registerHelper('eq', function () {
	const args = Array.prototype.slice.call(arguments, 0, -1);
	return args.every(function (expression) {
  	return args[0] === expression;
  });
});

document.body.innerHTML = template(data);