Mustache Example 1

Binding a primitive anonymous variable

HTML

<div id="gallery"></div>

JavaScript

var template = "<ul>{{#images}}<li>{{location}}</li>{{/images}}</ul>";

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 n = 4;
var imgs = _.groupBy(data, function(element, index){
    return Math.floor(index/n);
});

console.log(imgs);


Mustache.parse(template);
var rendered = Mustache.render(template, { imgs: JSON.parse(imgs) });
$('#gallery').html(rendered);