I am new to Mustache and trying to figure out how to display the first object array in a list using mustache. I woulld like to be able to to pass a varialbe to decide which index of the list will be displayed using the mustache template. for example:
var template = $('#testing_tmp').html();
var dataId = 1;
var html = Mustache.to_html(template, projects[dataId]);
$('#header').html(html);
Doing this code above it would pass the the data with the given index and display a single object with the given key instead of a whole list of objects.
Here is my code currently:
<script id="testing_tmp" type="text/template">
{{#proj}}
<div>{{id}} go get some {{title}}</div>
{{/proj}}
</script>
$('body').on('click', '.logo', function(){
var projects = {
"proj": [
{
id:"1",
title:"Ronald",
description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0",
projectLink:"http://www.google.com",
genre:"web-app",
images: [
{largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
]
},
{
id:"2",
title:"Jake",
description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0",
projectLink:"http://www.google.com",
genre:"web-app",
images: [
{largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
]
},
{
id:"3",
title:"Benny",
description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0",
projectLink:"http://www.google.com",
genre:"web-app",
images: [
{largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
]
}
]
};
var template = $('#testing_tmp').html();
//alert(template);
var html = Mustache.to_html(template, projects[1]);
$('#header').html(html);
});
You can do something like this:
var html = Mustache.to_html(template, { "proj" : projects.proj[1] });
Here you are basically just restructuring the object to look like projects
, but with only the second object in it.