JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="//raw.github.com/olado/doT/master/doT.min.js"></script>

<div id="out"></div>



<div id="template" style="display:none">
    <ul>        
        {{~it :value}}        
        <li>Persons name is {{=value.name}}. They are {{=value.age}}.</li>
        {{~}}
	</ul>
</div>

JavaScript

var data = [
    {name:"Joe", age:20},
	{name:"Jane", age:25},
	{name:"Bob", age:60},
    {name:"Billy", age:10},
    {name:"Mick", age:40}
]

//using doT to, compile a template into a function
var templateHTML = $("#template").html();
var myTemplate = doT.template(templateHTML);

//pass in the data to the template, it will return the generated html
var html = myTemplate(data);

//check the html string
console.log(html);

//put the html into a div
$("#out").html(html)