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

我有一些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>

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

    });

});

{title}
{names}{~n}{/names}

这将创建以下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下面呈现一个按钮。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>

如果“背景”=“坏”
按钮1
否则，如果“背景”=“良好”
按钮2
否则，如果“背景”=“非常糟糕”
按钮3

我创建了一个JSFIDLE，它显示了以下内容：

---

任何提示都将不胜感激！

您能用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");

    });

});

$（文档）.ready（函数（）{
var template=“
{title}
{name}按钮：{type}
{~n}{/names}
”
var compiled=dust.compile（模板“intro”）；
粉尘.负荷源（已编译）；
风险值数据={
“标题”：“可用汽车”，
“姓名”：[{
“名称”：“福特”，
“image”：“/images/ford.png”，
“flags”：“../images/us.png”，
“描述”：“制造普通汽车”，
“细节”：[{
“简介”：“美国大公司”，
“背景”：“不好”
}]
}, {
“名称”：“BWM”，
“image”：“/images/bmw.png”，
“标志”：“../images/gm.png”，
“描述”：“制造伟大的汽车”，
“细节”：[{
“简介”：“中德公司”，
“背景”：“好”
}]
}, {
“名称”：“大众”，
“图像”：“/images/vw.png”，
“标志”：“../images/gm.png”，
“描述”：“MakeGoodCars”，
“细节”：[{
“简介”：“大型德国公司”，
“背景”：“非常糟糕”
}]
}]
};
var arr=data.names；
对于（var i=0；i.如果无法更新JSON，则始终可以创建一个自定义dust base，在调用dust.render之前可以对其进行初始化。请参阅中的上下文部分。它可能类似于：

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

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

    });

});

$（文档）.ready（函数（）{
var template=“
{title}
{name}按钮：{type data=detail/}
{~n}{/name}

或者再次打开。
尝试使用dustjs帮助程序，例如选择帮助程序。有一件事是正确的，关于汽车质量的JSON数据似乎是正确的：）