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>

我想添加一些查看“背景”值的逻辑，并根据值在每个li下面显示一个按钮。 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>

我创建了一个显示这个的jsfiddle：

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

任何指针都将非常感激！

Answer 1

你能在javascript中更新JSON吗？像这样：

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

    });

});

在this JSFiddle中了解它的工作原理。如果您无法更新JSON，那么您始终可以创建一个自定义灰尘基础，您可以在调用dust.render之前初始化它。请参阅the dust guide中的上下文部分。它可能是这样的：

$(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 = (...); // as in the 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");

    });

});

或者再次JSFiddle。

Dust.js模板具有简单的逻辑

1 个答案: