Mustache Example 1

Binding a primitive anonymous variable

by Eric Howe

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script id="t" type="text/x-mustache">
    <ul>
        {{#chunks}}
            <li>
                {{#.}}
                    <p>{{location}}</p>
                {{/.}}
            </li>
        {{/chunks}}
    </ul>
</script>
<div id="gallery"></div>

JavaScript

_.mixin({
    chunk: function(a, n) {
        // Based on lodash's
        var i = 0, length = a.length, ri = -1;
        var result = Array(Math.ceil(length / n));
        while(i < length)
            result[++ri] = a.slice(i, i += n);
        return result;
    }
});

var data = [
	{"location":"gallery/Baar_Toit_5.jpg"},
	{"location":"gallery/Baar_Toit_7.jpg"},
	{"location":"gallery/Baar_Toit_8.jpg"},
	{"location":"gallery/Baar_Int_1.jpg"},
	{"location":"gallery/Baar_Int_2.jpg"},
	{"location":"gallery/Baar_Int_3.jpg"},
	{"location":"gallery/Baar_Int_4.jpg"},
	{"location":"gallery/Baar_Uus_01.jpg"},
	{"location":"gallery/Baar_Uus_02.jpg"},
	{"location":"gallery/Baar_Uus_03.jpg"},
	{"location":"gallery/Baar_Uus_04.jpg"},
	{"location":"gallery/Baar_Uus_05.jpg"},
    {"location":"gallery/Baar_Uus_06.jpg"},
    {"location":"gallery/Baar_Uus_07.jpg"}
];

var chunks = _(data).chunk(4);

var rendered = Mustache.render($('#t').html(), {
    chunks: chunks
});
$('#gallery').html(rendered);