JSFiddle - React, Tailwind, and code Playground

by teklocust

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script type="text/template" id="persons_template">
    <ul>
    {{#persons}}
        <li>
            {{#if ../options.show_first_name}} <!-- one level -->
                {{#if ../../options.show_last_name}}  <!-- two levels -->
                    {{#if ../../../options.show_phone_number}} <!-- three levels -->
                        {{last_name}}, {{first_name}} {{phone_number}}<!-- down three levels, but this is first level? -->
                        <br>Show phone number? {{../../../../options.show_phone_number}}<!-- four levels -->
                    {{/if}}
                {{/if}}
            {{/if}}
             
        </li>
    {{/persons}}
    </ul>
</script>

<script type="text/template" id="single_template">
    {{#if options.show_first_name}}<!-- top level -->
        {{#if ../options.show_last_name}}  <!-- one level -->
            {{#if ../../options.show_phone_number}}<!-- two levels -->
                {{single.last_name}}, {{single.first_name}} {{single.phone_number}}<!-- top level -->
                <br>Show first name? {{options.show_first_name}}<!-- top level? -->
            {{/if}}
        {{/if}}
    {{/if}}
</script>

<h1>Loop output</h1>
<div class="loop_output"></div>

<h1>Single output</h1>
<div class="single_output"></div>

JavaScript

var data = {
    persons: [
        {
            first_name: "Yehuda",
            last_name: "Katz",
            phone_number: "(555) 321-4567"
            
        },
        {
            first_name: "Leah",
            last_name: "Silber",
            phone_number: "(555) 654-3210"
        },
        {
            first_name: "Peter",
            last_name: "Wagenet",
            phone_number: "(555) 789-4563"
        }
    ],
    options: {
        show_first_name: true,
        show_last_name: true,
        show_phone_number: true
        
    },
    single:  {
        first_name: "Bill",
        last_name: "Lumbergh",
        phone_number: "(555) 321-4567"   
    }
};

var persons_template = $("#persons_template").html();
$(".loop_output").html(Handlebars.compile(persons_template)(data));

var single_template = $("#single_template").html();
$(".single_output").html(Handlebars.compile(single_template)(data));