JSFiddle - React, Tailwind, and code Playground

Mustache example

by brasofilo

HTML

<script src="http://examples.kevinchisholm.com/javascript/libraries/mustache.js"></script>
<!-- Mustache.js example - blog.kevinchisholm.com -->

<!-- this is the HTML template -->
<script type="text/html" id="template">
    <h1>My Favorite European Cities</h1>
    <ul>
        {{#cities}}
        <li>{{name}}</li>
        {{/cities}}
    </ul>
</script>

<!-- this div is empty on page load -->
<div id="container"></div>

<h1>useful links</h1>
<a href="https://github.com/janl/mustache.js/">mustache</a>

<a href="http://mustache.github.com/">mustache ghub</a>

<a href="http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-the-mustache-template-library/">tutplus</a>

<a href="http://www.youtube.com/results?search_query=Mustache.js">youtube</a>

JavaScript

(function(){
	//this is our JSON (data)

	var data = {
		"cities": [
			{"name": "London"},
			{"name": "Paris"},
			{"name": "Munich"}
		]
	},

	//get a reference to our HTML template
	template = $('#template').html(),

	//tell Mustache.js to iterate through the JSON and insert the data into the HTML template
	output = Mustache.render(template, data);

	//append the HTML template to the DOM
	$('#container').append(output);
})();