Dust.js template with simple logic -

i have json data:

 {          "title": "available cars",              "names": [{              "name": "ford",                  "image": "./images/ford.png",                  "flags": "./images/us.png",                  "description": "make average cars",                  "detail": [{                  "profile": "big 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"              }]          }]      } 

and template looks this:

<div><ul><li>{title}</li>{#names}<li data-name=\"{name}\"><a href=\"{name}\"> <h4><img src=\"{flags}\">name :{name}</h4><p>{description}</p></a></li>{~n}{/names}</ul></div></div> 

which creates following html:

<div id="container">     <div>         <ul>             <li>available cars</li>             <li data-name="ford"><a href="ford"><h4><img src="./images/us.png">name :ford</h4>                  <p>make average cars</p></a></li>             <li data-name="bwm"><a href="bwm"><h4><img src="./images/gm.png">name :bwm</h4>                  <p>make great cars</p></a></li>             <li data-name="vw"><a href="vw"><h4><img src="./images/gm.png">name :vw</h4>                  <p>makegoodcars</p></a></li>         </ul>     </div> </div> 

i want add logic looks @ value of "background" , renders button underneath each li based on value. e.g.

if "background" == "bad"     <button type="button">button 1</button> else if "background" == "good"    <button type="button">button 2</button> else if "background" == "very bad""    <button type="button">button 3</button> 

ive create jsfiddle shows this:

http://jsfiddle.net/carlskii/dam29/5/

any pointers appreciated!

can update json in javascript? this:

$(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 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");      });  }); 

see how works in this jsfiddle. if can't update json can create custom dust base can initialize before calling dust.render. see section context in the dust guide. this:

$(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 = (...); // in previous example      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");      });  }); 

or again on jsfiddle.