JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v4.0.5.js"></script>
<div id="output"></div>
<script type="template/handlebars" id="template">
Not inside #each:
 1.IF: {{#if true}}{{name}}-{{../name}}-{{../../name}}-{{../../../name}}{{/if}}
 2.MYIF: {{#myif true}}{{name}}={{../name}}={{../../name}}={{../../../name}}{{/myif}}
 3.MYWITH: {{#mywith true}}{{name}}~{{../name}}~{{../../name}}~{{../../../name}}{{/mywith}}

Inside #each:
{{#each array}}
 1.IF: {{#if true}}{{name}}-{{../name}}-{{../../name}}-{{../../../name}}{{/if}}
 2.MYIF: {{#myif true}}{{name}}={{../name}}={{../../name}}={{../../../name}}{{/myif}}
 3.MYWITH: {{#mywith true}}{{name}}~{{../name}}~{{../../name}}~{{../../../name}}{{/mywith}}
{{/each}}
</script>

JavaScript

Handlebars.registerHelper('myif', function(conditional, options) {
    if (conditional) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
});

Handlebars.registerHelper('mywith', function(context, options) {
    return options.fn(context);
});

var template = Handlebars.compile(document.getElementById('template').innerHTML);

document.getElementById('output').innerHTML =  '<textarea style="height:200px;width:100%">' + template({
    "name": "John",
    "array": [1]
}) + '</textarea>';