Mustache line up. Creating HTML Templates with

Web applications use MVC architectures to separate business logic from the presentation views. Complex projects which involves large amounts of client side HTML manipulation with JavaScript can be difficult to maintain. In such scenarios we can use template systems to increase reusability and ease the task of managing views. provides a well documented template system which can be used to manage your templates. And, since mustache supports various languages, we don’t need a separate templating system on the server side. This article covers the basics of working with mustache. Names of different types of mustaches.

Why We Need Template Systems

Most developers that are not aware of template systems create new chunks of HTML code and dynamically insert them into the DOM using JavaScript. A common way of doing this is to specify the HTML elements in a string and then set the

property or call the jQuery

method. An example of this technique is shown below.

var dynamic_html = "<div><span>Highlighted</span><span>Author</span></div>"; document.getElementByID("container").innerHTML = dynamic_html;

Another method for building the DOM is to create elements and append them individually, as shown below.

var title = document.createElement('div'); var highlight = document.createElement('span'); var highlight_text = document.createTextNode("Highlight"); var author = document.createElement('span'); var author_text = document.createTextNode("Author"); var container = document.getElementById('container'); highlight.appendChild(highlight_text); title.appendChild(highlight); author.appendChild(author_text); title.appendChild(author); container.appendChild(title);

Both the methods above can be used effectively to add elements dynamically into your document. Consider a situation where we have a very well designed bullet list which needs to be used across three different types of pages in our site. Using these techniques, we would have to repeat the HTML code the list in three different locations. This is generally considered to be bad coding practice.

In such scenarios we can use predefined templates in different locations without repeating the code. is a very popular template engine using JavaScript. Since mustache provides both server side and client side templates for numerous languages, we don’t have to worry about choosing separate template engines.

Getting Started with Mustache.js

Mustache is an open source logic-less template system developed for languages such as JavaScript, Ruby, Python, PHP, and Java. You can grab a copy of the library by visiting the official page on GitHub. Mustache provides templates and views as the basis for creating dynamic templates. Views contain the data to be included in the templates as JSON. Templates contain the presentation HTML or data with the template tags for including view data. Earlier, we mentioned mustache as logic-less. This means the templates will not contain any

loops. Now, let’s get started on mustache templates using a simple example.

<!doctype html> <html lang="en"> <head> Inline Method</title> <script type="text/javascript" src="mustache.js" ></script> <script> var view = { name: "Joe", occupation: "Web Developer" }; function loadtemp(){ var output = Mustache.render("{{name}} is a {{occupation}}", view); document.getElementById('person').innerHTML = output; } </script> </head> <body onload="loadtemp()" > <p id="person"></p> </body> </html>

Mustache with soul patch name

First, we need to include the file in the document. Then we can work on creating mustache templates. In the above example we have a view containing the name and occupation of a person. Then, we have the template inside the

function with presentation code and tags for name and occupation data. Tags are indicated by the double braces, or mustaches, that surround them. Now, let’s take a look at how the

Rendering Mustache Templates

The following code shows the implementation of the

function inside the file. Three parameters can be passed to

. The first two parameters,

can be considered as dynamic templates which you can inject into your main template. In our previous example, we passed the template as an inline parameter and the view as the second parameter, and assigned the result to the

Writer.prototype.render = function (template, view, partials) { return this.compile(template)(view, partials); };

This is the most basic form of templating with mustache. Let’s see the other methods available for creating more organized code.

Defining Mustache Templates

There are various methods for defining mustache templates in your application. These methods are similar to including CSS using inline styles, inline stylesheets, and external stylesheets. The example we discussed earlier can be considered as an inline method since we are passing the template directly to the function. This method prevents the possibility of reusable templates. Let’s see how we can define templates as inline script templates as opposed to directly passing to the function.

Templates as Inline Scripts

We can define template data inside of a

tag and include it in the HTML document. To prevent the browser from executing the template code, we must change the MIME type to something other than

Indian style mustache

. Some common MIME types are

. The following example is a simple template using this method.

You can include as many templates in a document as you wish with different IDs. When you want to use the template, get the HTML inside the script tag using

, and pass it as a template. Our first example will change to the following code.

<script type='text/javascript'> var template = document.getElementById('sample_template').innerHTML; var output = Mustache.render(template, view); document.getElementById('person').innerHTML = output; </script>

As you can see, templates are stored separately and used dynamically when required. This method increases the possibility of reusing templates. However, using inline scripts limits the templates’ scope to a single page. If you have multiple pages, you have to define your templates again. So, including templates in an external file will be the ideal solution – just like with CSS.

Templates as External HTML Snippets

In this technique we are going to use jQuery to implement templating. jQuery provides a function called

, which can be used to fetch part of an external document. We are going to use this method to load templates dynamically from our external templates files. The

function executes scripts instead of returning them, so we cannot create templates inside of script tags as we did in the previous method. The following example shows the external template files we are going to use.

elements for templates instead of scripts to keep it compatible with jQuery’s

function. Here, we have three different templates with three different IDs. Now, let’s move on to using these templates in your pages.

What is moustache

<!doctype html> <html lang="en"> <head> External Method</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript" src="mustache.js" ></script> <script> $(document).ready(function(){ var view = { name: "Joe", occupation: "Web Developer" }; #template1",function(){ var template = document.getElementById('template1').innerHTML; var output = Mustache.render(template, view); $("#person").html(output); }); }); </script> </head> <body> <p id="person"></p> <div id="templates" ></div> </body> </html>

jQuery inserts the returned document into an HTML element instead of assigning it to a variable. So, we need a dummy container to keep the templates. I have used the

container which is hidden by default. The example above retrieves

, and loads it. Then, we can get the template from the dummy container and pass it to mustache for rendering. This is how the external method works. We can also get the data from a server using an AJAX request.


Template engines and frameworks are important in managing complex systems with dynamically changing presentation views. is one of the best choices for managing templates on the client side. We started this tutorial by explaining why templates are important. Then, we moved onto various techniques of using mustache templates. Now you will be able to choose the method of implementing mustache templates in your projects.

We have completed exploring various techniques for using mustache templates, but mustache also comes with tags such as variables, sections, functions and partials, which are used to manage complex templates. Discussing the syntax of each tag is beyond the scope of this tutorial. You can find a comprehensive guide to mustache tags on the mustache GitHub page.

Feel free to share your previous experiences in working with mustache.js!

Posted by at 09:24PM

Tags: mustache line up, no hair in middle of mustache, the moustache, how to keep moustache, simple mustache styles, south indian moustache style, well groomed moustache, mustache with soul patch name, what is moustache, indian style mustache

Overall rating page: 3.88/5 left 6574 people.


There are no comments for this post "Creating HTML Templates with". Be the first to comment...

Add Comment