Mustache Example 4

Binding a data object and a localization (L10n) data object

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<h2>Example 4 : Binding Localization (L10n) data with dynamic data </h2>

<div id="output"></div>

<script type="text/html" id="test4">
    <p>
        <b>{{localize.label-name}}</b> {{data.name}}<br />
        <b>{{localize.label-qty}}</b> {{data.qty}}
    </p>
</script>

JavaScript

$(document).ready(function () {
    var output = $("#output");    
    var template = $("#test4").html();
    
    // user data is in "data", and the server provides l10n data in a "localize" object
    var data4 = { 
        data : { 
            qty : 500, 
            name : "Dan" 
        }, localize : 
        { 
            "label-name" : "First Name:", 
            "label-qty" : ":"
        }
    };
    
    html = Mustache.render(template, data4);
    output.append(html);
});