jsFiddle Demo Here

Question

给定JSON数据/ css.json这样：

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "img/css-metric.png",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}

HTML，例如：

<body id="anchor"></body>

HTML的JS如：

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

通过编辑#tpl（我猜），如何根据以下值创建条件：

如果css-class的值==＆＃34; img＆＃34;然后注入：

<img src="{{syntaxe}}" alt="An image" height="64" width="64">

否则注入：

{{syntaxe}}

Answer 1

<子>已更新！底部有“当前”代码的可能解决方案

尝试使用jQuery的.each()方法：

if (data["CSS"]) {    //    check that CSS exist
    $.each(data.CSS, function(i, v) {  //  i is Index of the array, v is the Value
        if (v["css-class"]) {    //    check that the data value exist
            if (v["css-class"] == "img") {
                alert("TRUE");
            }
            else {
                alert("FALSE");
            }
        }
    });
}

同样，我并不特别了解胡子，但如果我完全掌握了你所拥有的东西，这就是我在jQuery中专门做的事情：

jsFiddle Demo Here

$(function() {
        if (data["CSS"]) {    //    check that CSS exist
        $.each(data.CSS, function(i, v) {  //  i is Index of the array, v is the Value
            var newDiv = $("<div />", { class: v["css-class"] }).append(
                    $("<p />", { class: "logic-english", text: v["logic-english"] })
                );

            if (v["css-class"]) {    //    check that the data value exist
                if (v["css-class"] == "img") {
                    newDiv.prepend(
                        $("<img />", { class: v["level"], height: 64, width: 64, src: v["syntaxe"] })
                    );
                }
                else {
                    newDiv.prepend(
                        $("<p />", { class: v["level"], text: v["syntaxe"] })
                    );
                }
            }

            newDiv.appendTo($("#myContainer"));
        });
    }
})

Answer 2

_{按照之前的回答评论建议}

另一种解决方案

_{在元素创建后使用jQuery的方法。}

您可以使用jQuery的Selector，.each()和.replaceWith()方法在模板化JavaScript将新元素写入DOM后进行修复。

这看起来像是：

$(function() {
    $.getJSON('data/css.json', function(data) {
        var template = $('#tpl').html();
        var info = Mustache.to_html(template, data);
        $('#anchor').html(info);

        $(".img").each(function(i) {
            var myP = $(this).children("p").first(),
                myClass = myP.attr("class"),
                mySrc = myP.text();
            myP.replaceWith($("<img />", { class: myClass, height: 64, width: 64, src: mySrc }));
        });
    });
});

jQuery参考：

链接到Mustache.js（我认为他正在使用）

Answer 3

我发现做的最小修改如果/然后在值上编辑JSON，现在包含两种可能的结果。我添加了一个JSON密钥syntaxe2。使用{{syntaxe}}{{{syntaxe2}}}调用{syntaxe}的值和{syntaxe2}的值，但在给定的行中只存在一个且只有一个。因此，它是{{syntaxe1}}（转义）或 {{{syntaxe2}}}（未转义）。对于我的情况，这个JSON + tpl技巧与if / then具有相同的效果。

（已修改）JSON数据/ css.json等：

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "",  "syntaxe2": "<img src='img/css-metric.png' widht='100%' height='100%'>",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}

（相同）HTML，例如：

<body id="anchor"></body>

（相同）HTML的JS设置：

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

（已修改）HTML的JS模板：

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

（相同）HTML的JS注入：

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

JS模板：if / else取值如何？

3 个答案:

jsFiddle Demo Here

另一种解决方案