JSFiddle - React, Tailwind, and code Playground

by ozkary

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
    <div id="content">content here
    </div>
<script id="makes-template" type="text/x-handlebars-template">
{{#Makes}}
<h1>{{Name}}</h1>
<ul>
{{#Models}}
<li>{{Name}}</li>
{{/Models}}
</ul>
{{/Makes}}  
</script>

JavaScript

var makesModel = {Makes: [
{"Name":"Acura", "Models":[{"Name":"ILX"},{"Name":"MDX"},{"Name":"NSX Coupe"}]},
{"Name":"Ford","Models":[{ "Name":"Escape"},{"Name":"Edge"},{ "Name":"Focus"}]},
{"Name":"Nissan","Models":[{"Name":"Altima"},{"Name":"Sentra"},{"Name":"XTerra"}]}
]};
  
function init() {        
        var source = $("#makes-template").html();
        var template = Handlebars.compile(source);
        $("#content").html(template(makesModel));    
    }

init();