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&#8221;

};

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:

  • JavaScript
  • PHP
  • Java

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 :

http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

http://www.sitepoint.com/creating-html-templates-with-mustachejs/

http://code.tutsplus.com/tutorials/an-introduction-to-handlebars–net-27761

Good Luck…:)

Advertisements