JSFiddle - React, Tailwind, and code Playground

by ErisDS

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.0.js"></script>
<div id="output"></div>
<script type="template/handlebars" id="template">
<p>Output: {{c}}</p>
       
<h2>Example block expression</h2>    
{{#a}}
    <p>Output: {{../c}}</p>

    {{#if b}}
    <p>Output: {{../c}}</p>
    {{/if}}
    
    {{#if b}}
    <p>Output: {{../../c}}</p>
    {{/if}}
{{/a}}
  
<h2>Example explicit with</h2>    
{{#with a}}
    <p>Output: {{../c}}</p>

    {{#if b}}
    <p>Output: {{../c}}</p>
    {{/if}}
    
    {{#if b}}
    <p>Output: {{../../c}}</p>
    {{/if}}
{{/with}}    
    
<h2>Top level conditional</h2>
{{#if a.b}}
<p>Output: {{c}}</p>
{{/if}}    
    
</script>

JavaScript

var template2 = Handlebars.compile(document.getElementById('template').innerHTML);
var context = {
    a: {
        b: true,
    },
    c: 'd',
    
};

document.getElementById('output').innerHTML = template2(context);