JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<script src="https://rawgithub.com/wycats/handlebars.js/1.0.0/dist/handlebars.js"></script>
<h2>Result is in div below</h2>
<div class="result"></div>

<!-- Your code handlebars template inside this element  -->
<template id="template">
    Foo: {{foo.bar}}
</template>

CSS

template {
    display: none;
}
.result {
    border: 1px solid black;
}

JavaScript

//this will get the template code
var templateCode = $("#template").html();
// Handlebars.compile will turn the handlebars code into a function we can invoke later
var template = Handlebars.compile(templateCode);
//this is the context - i.e. the object where handlebars template will resolve its variables from
//feel free to change this object
var context = {
    foo: {
        bar: 'whatever'
    }
};
//this will finally execute the template and return a string - generated HTML code
var htmlResult = template(context);
//this inserts the HTML code into result element
$(".result").html(htmlResult);