Testing Mustache.js Template

by Kai Carver

HTML

<script src="https://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<div id="moustacheHtml"></div>
<hr />
<div>
    As seen on <a href="https://github.com/janl/mustache.js" target="_blank">https://github.com/janl/mustache.js</a>
</div>

CSS

div {
    font:14px Arial;
    margin:50px 20px;
}

JavaScript

$(function() {
    
    var template = '<h1>{{header}}</h1>\
        {{#message}}\
            <p>{{message}}</p>\
        {{/message}}\
        {{#items}}\
            <li>\
                {{#url}}<a href="{{url}}">{{/url}}\
                {{#first}}<strong>{{/first}}\
                    {{{name}}}\
                {{#first}}</strong>{{/first}}\
                {{#url}}</a>{{/url}}\
            </li>\
        {{/items}}<br />\
        {{#bolder}}TEST{{/bolder}}';
    
    var json = {
        "header": "Colors",
        "message": false,
        "items": [{
                "name": "<em>red</em>",
                "first": true,
                "url": "#Red"
            }, {
                "name": "green",
            }, {
                "name": "blue",
                "url": "#Blue"
        }],
        "bolder": function() {
            return function(text, render) {
                return "<strong>" + render(text) + '</strong>'
            }
        }
     };

    var html = Mustache.to_html(template, json); //.replace(/^\s*/mg, '');
    $('div#moustacheHtml').html(html);
    
    // Test 2
    var navItemTpl = '{{#ico}}<li>{{.}}</li>{{/ico}}';
    var navItemTplValue = {
            ico :[
                'ico_photos.png',
                'ico_photos.png',
                'ico_photos.png'
            ]
    };
    var navItemTplHtml = Mustache.to_html(navItemTpl, navItemTplValue);
    console.log(navItemTplHtml);

});