#HTML5 Integration #Integration

HTML5 – Mustache.js simple example

27 Sep

by Jeremy 1

Here is the code for a simple mustache.js html5 integration :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 - Mustache.js simple example</title>
    </head>
    <body>
    	<h1>Mustache.js</h1>
    	<p>Mustache.jss how to</p>
    	<hr />
    	<div id="mustache-target"></div>
    	<hr />

    	<script id="mustache-template" type="x-tmpl-mustache">
    		<p>Hello {{ name }} !</p>
    		<p>The list of library used in this tutorial are :</p>
    		<ul>
    			{{#libs}}
    				<li>{{.}}</li>
    			{{/libs}}
    		</ul>
    	</script>

    	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.js"></script>

    	<script>
    		$(document).ready(function() {
    			var template = $('#mustache-template').html();
    			var params = {
    				'name': 'Jeremy',
    				'libs': ['jquery', 'mustache.js']
    			};
    			var rendered = Mustache.render(template, params);
    			$('#mustache-target').html(rendered);
    		});
    	</script>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>HTML5 - Mustache.js simple example</title>

</head>

<body>

<h1>Mustache.js</h1>

<p>Mustache.jss how to</p>

<hr />

<hr />

<p>Hello {{ name }} !</p>

<p>The list of library used in this tutorial are :</p>

<ul>

</ul>

</script>

$(document).ready(function() {

var template = $('#mustache-template').html();

var params = {

'name': 'Jeremy',

'libs': ['jquery', 'mustache.js']

};

var rendered = Mustache.render(template, params);

$('#mustache-target').html(rendered);

});

</script>

</body>

</html>

That’s all.

Jeremy Curny

Design and development engineer

HTML5 – Mustache.js simple example

Comments (1)

Cancel reply