Mustache.js: What Makes This Template System So Resourceful

To put it in learner’s terms, Mustache is a web template system. But as you would expect, it is more advanced than its counterparts and does involve a fair mix of new and old technologies and implementations. It has been primarily developed for languages like PHP, Ruby, Python, JS and so on.

Now, whenever you need to execute certain conditions or perform any loops, there is no availability of features like if and else statements and for loops, however, there are some very useful section tags for your consideration, namely, lists and lambdas. Owing to these reasons it is often referred to as a logic-less template.

Using Mustache.js

Before everything else, if you are curious about its unusual name, Mustache gets its name from the fact that there are many curly braces used in this method and they go on to resemble a mustache.

Why the Need for Mustache?

Let’s face it, when we are shaping the HTML elements by making use of JavaScript or jQuery, the code can get messy and overtly complicated for our liking.

 // JavaScript newDiv = document.createElement('div'); newDiv.setAttribute('class', 'new'); order_list = document.createElement('ol'); newDiv.appendChild(order_list); list_value = document.createElement('li'); list_value.innerHTML = 'Order list value'; order_list.appendChild(list_value);  // jQuery newDiv = $  ('<div class="new"><ol></ol></div>'); newDiv.children('ol').append('<li>Order list value<li>'); 

Now, what if you have been planning on writing code for even bigger and complex applications? The above code gets messier and harder for you to understand.

However, when you are using Mustache.js, you get a solution that is far more feasible to understand and implement:

 var view = { 	name: "Roy", 	say: function(){ 		return "Hello!"; 	} } var template = "{{name}} says {{say}}"; var html = Mustache.to_html(template, view); alert(html); 

So, as can be seen, the whole code is truncated, much to the liking of any developer. Using some simple lines of code, it can provide us some dynamic templates that are too good to ignore.

Let’s look at one more mustache example that clearly shows how the if and else statements and the for loops are not needed at all:

 <!doctype html> <!DOCTYPE html> <html lang="en"> <head> <title>Create a Methout with using of Mustache.js</title> <script type="text/javascript" src="js/mustache.js" ></script> <script> var view = { 	title : "Mustache", 	rank : "Good" };  function loadtemp(){ 	var output = Mustache.render("{{rank}} rank of  {Mustache.js: What Makes This Template System So Resourceful}", view); 	document.getElementById('rank').innerHTML = output; } </script> </head> <body onload="loadtemp()"> 	<div id="rank"></div> </body> </html> 

The process has to begin with creating a mustache.js file and after that, we can proceed to creating the templates. The example I have provided has a view that stores the name and occupation of an individual and then the render() function contains the template. It also contains all the necessary tags and the presentation we need in terms of the required data.

How the Template Can be As Snippets from Outside

Now, the next example we are stating will show how jQuery can be used for template leveraging certain functions like load().

What this method does essentially is that it fetches the templates from external files and loads them dynamically. Here are some external template files to be used in our example:

 <div id="theme1" > <h1>{Mustache.js: What Makes This Template System So Resourceful}</h1> </div>   <div id="theme2" > <div>{Mustache.js: What Makes This Template System So Resourceful}</div> </div>   <div id="theme3" > <p><span>{Mustache.js: What Makes This Template System So Resourceful}</span></p> </div> 

In order to ensure the compatibility with the jQuery, the <div> element is brought into action. Now, since we have different templates represented differently, we will have separate ids for each and now let’s put them into action by using them in a page:

 <!doctype html> <html lang="en"> <head> <title>Template Can be As Snippets from Outside</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> <script type="text/javascript" src="js/mustache.js" ></script> <script> $  (document).ready(function(){ 	var view = { 		title : "Mustache", 		rank : "Good" 	};  	$  ("#rank").load("t2.php #theme1",function(){ 		var theme1 = document.getElementById('theme1').innerHTML; 		var output = Mustache.render(theme1, view); 		$  ("#rank").html(output); 	}); }); </script> </head> <body> 	<div id="rank"></div> </body> </html> 

More Methods

There are a number of other methods as well that can be used and must be known to you:

ich.addTemplate(name, mustacheTemplateString): This method is used to add a new template. While there are other methods for the same job, you can use it as an alternative to the <script type=”text/html”> way of execution. You also have the provision to lazy load.

ich.clearAll(): As the name suggests, it frees some memory by clearing the templates and also reduces the cache to a fairly large extent.

ich.grabTemplates(): This method proves to be resourceful while finding the <script type=”text/html”> tags from which it creates the templates. It then goes on to removing those elements from the dom.

ich.refresh(): This one performs a total refresh, in the sense that it clears everything before fetching new templates. And this method proves to be handy when you have AJAX enabled pages containing more templates. This example only fetches the theme1 and loads it. Our jQuery basically does the job of inserting the returning document into the HTML element. This is basically how you can make the external method go about its job.


Mustache is certainly a technology that has made the web community sit up and take notice. And we can only expect more innovations to come our way in the future.

Onextrapixel – Web Design and Development Online Magazine