Dust.js template with simple logic v2
http://stackoverflow.com/questions/16080240/dust-js-template-with-simple-logic
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.4.0/dust-full.min.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 data=detail/}</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 dustCtx = dust.makeBase({
type: function(chunk, context, bodies, params){
var background = params.data[0].Background;
var output = "undefined";
if(background == "Bad"){
output = "Button 1";
}else if(background == "Good"){
output = "Button 2";
}else if(background == "Very Bad"){
output = "Button 3";
}
return chunk.write(output);
}
});
dust.render("intro", dustCtx.push(data), function (err, out) {
$('#container').html(out).trigger("create");
});
});