templates - シンプルなロジックの Dust.js テンプレート

Question

私はいくつかのJSONデータを持っています:

 {
         "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"
             }]
         }]
     }

そして、次のようなテンプレート:

<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>

次の 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>

「Background」の値を見て、値に基づいて各 li の下にボタンをレンダリングするロジックを追加したいと考えています。例えば

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>

これを示すjsfiddleを作成しました：

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

どんなポインタでも大歓迎です！