Questions tagged [mustache]

Mustache provides "logic-less templates". It has implementations in ruby, javascript, python, erlang, php, perl, objective-c, java, .net, android, c++, go, lua, ooc, actionscript, coldfusion, scala, clojure, fantom and node.js. It supports lists and lambdas, but it does not allow for embedded program logic (as in, for example, Django templates). As implied by the tagline "logic-less templates", that exclusion of logic is by design.

Mustache markup is very simple:

<nav>
    <h1>{{title}}</h1>
    <ul>{{#navList}}
        <li><a href="{{link}}">{{text}}</a></li>
    {{/navList}}</ul>
</nav>

The structure of the HTML and {{mustache}} markup play very nicely together.

Meanwhile, in JavaScript for example, the usage of the template couldn’t be simpler:

var navhtm = ... //Here would be some code to pull in template HTML*
var navobj = { //Data structure to define a menu
                 title : "Main Menu",
                 navList : [
                     { link: "page1.html", text: "Page 1" },
                     { link: "page2.html", text: "Page 2" },
                     { link: "pageC.html", text: "Page C" }
                 ]
             ;
//Of course, that data structure could come from the server or elsewhere...

//Render the template and stick it into the id="Nav" element using jQuery.
$("#Nav").html(Mustache.to_html(navhtm,navobj));

This will result in the id="Nav" tag being populated with this HTML:

<nav>
    <h1>Main Menu</h1>
    <ul>
        <li><a href="page1.html">Page 1</li>
        <li><a href="page2.html">Page 2</li>
        <li><a href="pageC.html">Page C</li>
    </ul>
</nav>