mustache.js is an implementation of the mustache template system in JavaScript.
- Mustache is a logic-less template syntax. It can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.
- Mustache is implemented in different languages: Ruby, JavaScript, Python, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, Scala, etc
- We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
Where to use mustache.js?
You can use mustache.js to render mustache templates anywhere you can use JavaScript. This includes web browsers, server-side environments such as node, and CouchDB views.
Below is quick example how to use mustache.js:
var view = {
title: “Rajasekhar”,
calc: function () {
return 2 + 4;
}
};
var output = Mustache.render(“{{title}} spends {{calc}}”, view);
In this example, the Mustache.render function takes two parameters: 1) the mustache template and 2) a view object that contains the data and code needed to render the template.
<!doctype html>
<htmllang=”en”>
<head>
<title>Mustache.js Inline Method</title>
<scripttype=”text/javascript”src=”mustache.js”></script>
<script>
var view = {
name : “Rajasekhar”,
company : “united online”
};
function loadtemp(){
var output = Mustache.render(“{{name}} works in {{ company }}”, view);
document.getElementById(‘person’).innerHTML = output;
}
</script>
</head>
<bodyonload=”loadtemp()”>
<pid=”person”></p>
</body>
</html>
Basic Template
var person = {
firstName: “Christophe”,
lastName: “Coenraets”,
blogURL: “http://coenraets.org”
};
var template = “<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}”;
var html = Mustache.to_html(template, person);
$(‘#sampleArea’).html(html);
Basic Template using Ajax data
$.getJSON(‘json/data.json’, function(data) {
var template = “<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}”;
var html = Mustache.to_html(template, data);
$(‘#sampleArea’).html(html);
});
Enumerable Section
var data = {name: “Rajasekhar”, skills: [‘JavaScript’, ‘PHP’, ‘Java’]};
var tpl = “{{name}} skills:<ul>{{#skills}}<li>{{.}}</li>{{/skills}}</ul>”;
var html = Mustache.to_html(tpl, data);
$(‘#sampleArea’).html(html);
Output :
Rajasekhar skills:
If the value of a section variable is a function, it will be called in the context of the current item in the list on each iteration.
View:
{ “uolhyd”:[ {“firstName”:”Rajasekhar”,”lastName”:”Kantepalli”}, {“firstName”:”Shiva”,”lastName”:”Kondur”}, {“firstName”:”Uday”,”lastName”:”Meduri”}, {“firstName”:”Sravanthi”,”lastName”:”Kakarla”} ], “name”:function(){ returnthis.firstName+” “+this.lastName; }}
Template:
{{# uolhyd }}* {{name}}{{/ uolhyd }}
Output:
* Rajasekhar Kantepalli
* Shiva Kondur
* Uday Meduri
* Sravanthi Kakarla
Advantages and Disadvantages:
Mustache:
+ Very popular choice with a large, active community.
+ Server side support in many languages, including Java.
+ Logic-less templates do a great job of forcing you to separate presentation from logic.
+ Clean syntax leads to templates that are easy to build, read, and maintain.
– A little too logic-less: basic tasks (e.g. label alternate rows with different CSS classes) are difficult.
– View logic is often pushed back to the server or implemented as a “lambda” (callable function).
– For lambdas to work on client and server, you must write them in JavaScript.
Handlebars:
+ Logic-less templates do a great job of forcing you to separate presentation from logic.
+ Clean syntax leads to templates that are easy to build, read, and maintain.
+ Compiled rather than interpreted templates.
+ Better support for paths than mustache (ie, reaching deep into a context object).
+ Better support for global helpers than mustache.
– Requires server-side JavaScript to render on the server.
References :
HTML Templating Using Mustache.js – TUTORIAL
http://www.sitepoint.com/creating-html-templates-with-mustachejs/
http://code.tutsplus.com/tutorials/an-introduction-to-handlebars–net-27761
Good Luck…:)
Way 2 Webdev 