Mustache Templating

Reference: http://mustache.github.com/mustache.5.html http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-the-mustache-template-library/

by tacomanator

HTML

<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<div id="mydiv"></div>

<script id="template" type="text/html">
    <h1> {{name}} </h1>
    <ul> 
        {{#sites}} 
            <li> {{#url}} {{.}} {{/url}} </li>
        {{/sites}} 
    </ul>
</script>

JavaScript

var data, template, html;  
  
data = {  
    name : "Some Tuts+ Sites",  
    sites: ["Nettuts+", "Psdtuts+", "Mobiletuts+"],  
    url : function () {  
        return function (text, render) {  
            text = render(text);  
            var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';  
            return '<a href="%27%20+%20url%20+%20%27">' + text + '</a>';  
        }  
    }  
};  

template = $("#template").html();
html = Mustache.to_html(template, data);  
  
$("#mydiv").html(html);