Mustache Example 3

Binding an array of objects to a list

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<h2>Example 3 : array of name/value objects</h2>

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

<script type="text/html" id="test3">
    <select onchange="test3_change(this);">
        {{#data}}
        <option value="{{value}}">{{text}}</option>
        {{/data}}
    </select>

    <script>
        function test3_change(select) {
            alert("Value is : " + $(select).val());
        }
    </script>
</script>

JavaScript

$(document).ready(function () {
    var output = $("#output");    
    var template = $("#test3").html();
    
    //test 3
    var data3 = { data : [
        {value : "1", text : "text 1"},
        {value : "2", text : "text 2"},
        {value : "3", text : "text 3"}
    ]};
    
    html = Mustache.render(template, data3);
    output.append(html);
});