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

Published: Sep 20, 2015
Under: Tutorials

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:

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:

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:

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