Dust.js template with simple logic v1
http://stackoverflow.com/questions/16080240/dust-js-template-with-simple-logic
HTML
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/linkedin/dustjs/master/lib/dust.js"></script>
<script src="https://raw.github.com/linkedin/dustjs/master/lib/parser.js"></script>
<script src="https://raw.github.com/linkedin/dustjs-helpers/master/dist/dust-helpers-1.1.0.js"></script>
<script src="https://raw.github.com/linkedin/dustjs/master/lib/compiler.js"></script>
<title>Listview</title>
<body>
<div data-role="page" class="type-home">
<div data-role="header">
<h1>Cars</h1>
</div>
<div id="container"></div>
</div>
</body>
JavaScript
$(document).ready(function () {
var template = "<div><ul><li>{title}</li>{#names}<li data-name=\"{name}\"><a href=\"{name}\"> <h4><img src=\"{flags}\">Name :{name}</h4><p>{description}</p></a><p>Button: {type}</p></li>{~n}{/names}</ul></div></div>"
var compiled = dust.compile(template, "intro");
dust.loadSource(compiled);
var data = {
"title": "Available Cars",
"names": [{
"name": "Ford",
"image": "./images/ford.png",
"flags": "./images/us.png",
"description": "Make Average Cars",
"detail": [{
"Profile": "Big US company",
"Background": "Bad"
}]
}, {
"name": "BWM",
"image": "./images/bmw.png",
"flags": "./images/gm.png",
"description": "Make Great Cars",
"detail": [{
"Profile": "MediumGermancompany",
"Background": "Good"
}]
}, {
"name": "VW",
"image": "./images/vw.png",
"flags": "./images/gm.png",
"description": "MakeGoodCars",
"detail": [{
"Profile": "LargeGermancompany",
"Background": "Very Bad"
}]
}]
};
var arr = data.names;
for(var i=0; i<arr.length; i++){
if(arr[i].detail[0].Background == "Bad"){
arr[i].type = "Button 1";
}else if(arr[i].detail[0].Background == "Good"){
arr[i].type = "Button 2";
}else if(arr[i].detail[0].Background == "Very Bad"){
arr[i].type = "Button 3";
}
}
dust.render("intro", data, function (err, out) {
$('#container').html(out).trigger("create");
});
});