JSFiddle - React, Tailwind, and code Playground

by Caitlin Allie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.2/handlebars.min.js"></script>
<h3>Handlebars JS Example</h3>

<script id="my-template" type="text/x-handlebars-template"> 
    {{#wizards}}
        {{wizard.firstName}} {{wizard.lastName}}
    {{/wizards}} 
    
    Unescaped: {{{school.slogan}}}
</script>

JavaScript

var source = $("#my-template").html(); 
var template = Handlebars.compile(source); 

var data = { 
    wizards: [ { 
        wizard: {
            firstName: "Harry", 
            lastName: "Potter",
            house: "Gryffindor"
        }
    }, {
        wizard: {
            firstName: "Luna", 
            lastName: "Lovegood",
            house: "Ravenclaw"
        }
    }],
    houses:  ["Gryffindor", "Ravenclaw", "Slytherin", "Hufflepuff"],
    school: {
    	name: "Hogwarts",
    	slogan: "Hogwarts is <b>cool</b>"
	}
}; 

$('body').append(template(data));