Mustache.js- the Javascript templating system you can't miss

Website development involves the execution of different tasks; both simple and complex. If your website project expects you to manage small chunks of data, followed by having two separate views for the same data; a logic-less template is what you need.

Mustache.js is one such fantastic and thoroughly resourceful template system that is both easy to use and can allow you to handle such a complication via a few lines of simple code. Continue to stay on this post for gathering a lot more information about Mustache.js- one of the most advanced web template system that involves a perfect blend of old and contemporary web technologies and their respective implementations.

What’s the exact need for a template system?

Before proceeding ahead with detailed explanation of Mustache.js template system, let’s get to know why we need one. Well, a wide majority of web developers are into the habit of creating huge chunks of HTML code, followed by dynamically inserting the same into DOM via JavaScript. They do this by specifying HTML elements into a string in addition to setting the innerHTML property.

Speaking of templates – check out this article regarding Facebook templates.

Here’s an example that display’s this method:

var exHTML = "
Title
Description
";
document.getElementByID("output").innerHTML = exHTML;

Now, consider that you need to use a bullet list across multiple pages within your website. For this, you’ll be expected to repeat the HTML code in order to display the list at different places. This is regarded as a poor coding practice and must be replaced by the most appropriate use of a pre-defined template at the desired locations where you intend to showcase the list.

In this post, we’ll be taking a closer look at Mustache.js- a template system that offers client side and server side templates for varied programming languages.

Mustache.js- An overview

Mustache.js is a useful template system that plays an important role in increasing the re-usability along with easing the task of managing different views. As a well-documented template system, Mustache.js supports multiple languages and refrains you from choosing individual template engine on the server side. Mustache is basically a logic-less template syntax that can be easily used for config files, HTML, source code and almost everything related to web development.

Don’t forget to see our free PSD templates for you next project

Also called a logic-less template syntax, Mustache doesn’t contain any if statements, for loops or else clauses. Instead, you can just find tags which are sometimes replaced by a value, a series of values or sometimes by nothing at all.

Mustache.js- A closer look at how it works

As an open source template system developed for popular programming languages like PHP, Ruby, Java, JavaScript and Python, Mustache.js has its code properly placed at the official page of GitHub. With Mustache, you can avail views and templates for creating templates that are completely dynamic in nature. Views include the data that needs to be included within the template as JSON.

Further, there are templates which include the data along with template tags that would be used for including the view data.

Let’s understand Mustache templates with the help of an example. Have a look at the below markup:

var detail = {
	user : "xyz",
	description : "dummy content"
};

function getDetail(){
	var output = Mustache.render("User: {{user}} 
Description: {{description}}", detail);
	document.getElementById('detail').innerHTML = output;
}

As is visible in the above example, there is a view which contains the name and job role of the person. After this, there is a template stored within render() function in addition to presentation code and tags belongings to the entered name and job role. Here, tags are being represented using double braces/mustaches.

A glimpse at the working of render() method

The below code snippet displays the implementation of render() function within the mustache.js file:

mustache.render = function render (template, view, partials) {
  return defaultWriter.render(template, view, partials);
};

In the above code, you can see that three parameters are being passed to the render() function. While the first two parameters viz: template and view are necessary; the third one i.e. partials is a dynamic template that can be inserted into the core template.

Finally, let’s explore the two popular methods of defining Mustache Templates in your application

Method No.1- Defining templates as Inline Scripts

As per this method, you can define template data within the tag, followed by including the same into HTML document. Here, you’re supposed to replace MIME to either text/template, text/html or text/mustache. This is done to refrain the browser from executing your template code.

Have a look at the below example which shows creation of a simple template using the above explained method:

One of the best things about this method is that it ensures that the templates are stored individually and used in a dynamic format. Hence, reusing existing templates becomes a complete breeze. The only downside associated with this method is that the template’s scope is restricted to a single page.

That means, if you’ve multiple pages and are interested in defining the Mustache templates repetitively, then this method won’t serve as the best bet. For resolving this complexity, you can opt for including the Mustache templates into an external file.

Learn more about Javascript by using the Single Var Pattern.

Method No.2- Defining templates as external snippets

As per this method, we’ll be using jQuery for implementing the templating process. There is a jQuery function named as load() which is used for fetching a specific portion of the external document. The same function would be executing scripts(and not returning them) and hence you won’t be able to create the Mustache templates within the scripts tags.

Here is an example that displays all the external template files that would be used in this technique:

{{user}}



{{user}}



{{user}}

Observe the above code carefully and you’ll find that the “div” elements have been used for templates and not for scripts. Also, you can find the use of three different templates, each with a unique template ID.

Now, below is the code for using the templates in the pages:

Since jQuery would be inserting returned document into HTML element, you’ll be required to have a dummy container that’s hidden by default. With the above code, we’ll be receiving template1 and loading it. Additionally, we’ll also receive template from dummy container, followed by passing the same to mustache for rendering purpose. An AJAX request would also enable you to receive data from the server.

We’re done!

Conclusion

Amongst the huge collection of frameworks and template engines, Mustache.js has indeed emerged as one of the best options for managing templates on client side. I’m sure the information captured in this post would help you in implementing Mustache templates in all your forthcoming web projects.