Mustache JS

In this tutorial I’m going to introduce to you a templating library
called Mustache. Mustache is available in
a variety of languages including PHP, Ruby, Python, Clojure, Node.js, ActionScript, and of course JavaScript which is the flavor that were gonna be using today.

Mustache is a “logic-less” template syntax. “Logic-less” means that it doesn’t rely on procedural statements (if, else, for, etc.): Mustache templates are entirely defined with tags.

It is named "Mustache" because of heavy use of curly braces that resemble a mustache. Mustache is used mainly for mobile and web applications.

To use mustache you must have a data source. This can be an array, a JSON string, a variable. Pretty much these are all objects in JavaScript so I’ll just go ahead and use the term object as a data source for mustache. Another thing that you’re going to need is a template which is basically HTML code where you specify how your data will be rendered in the page. For example if you want something to be displayed as a header the template is where you do it.
Lastly, you’re going to need an HTML element where you want to show your data.
That is all you need when using mustache. A data source , a template, and an HTML element where you want to show your data. Here’s an example:

<script>
        var person = {
            firstName: "Hello",
            lastName: "Guest",
            blogURL: "javascripttech.blogspot.com"
        };
        var template = "<h1>{{firstName}} {{lastName}}</h1>Blog:                        {{blogURL}}";
        var html = Mustache.to_html(template, person);

        $('#data').html(html);
 </script>

    <div id="data"></div>

For your template code you just need to place the name of the property that you want to output in a specific tag. In this case the name of the property is firstName, lastName, blogURL with the value of Hello, Guest, javascripttech.blogspot.com. The value is the one that’s going to be rendered inside your template. So the code above will output the word "Hello Guest" inside h1 tags.

Next I’m going to show you how to use sections. In programming terms sections are similar to the repeated portion of a loop. In sections we specify a start and an end and the portion that goes between the start and end is the repeated part based on the value of the current item. Here’s how to define a section: 

        var data = {
            name: "John Doe",
            skills: ['JavaScript', 'PHP', 'Java']
         };
         var tpl = "{{name}} skills:<ul>{{#skills}}<li>{{.}}</li>{{/skills}}                          </ul>";
         var html1 = Mustache.to_html(tpl, data);

        $('#Data').html(html1);

Let’s break it down. {{#skills}} define the start of the section {{/skills}} define its end. So the pound sign(#) defines the start and the forward-slash(/) defines the end. In between we put some
li tags because they’re basically repeated. Just remember that anything that is supposed to be repeated goes inside the section definition. Lastly we have this weird double mustache with a dot inside ({{.}}) which simply refers to the current item in the list.

Example: Live Demo