0

给定 JSON data/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 的值 == "img" 然后注入：

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

否则注入：

{{syntaxe}}

?

4

3 回答 3

2

更新！底部带有“当前”代码的可能解决方案

尝试使用 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 演示在这里

$(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"));
        });
    }
})
于 2013-05-02T15:59:01.483 回答
1

正如之前的答案评论所建议的那样

另一种解决方案

在创建元素后对元素使用 jQuery 的方法。

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

这看起来像：

$(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（我认为他正在使用）

于 2013-05-03T03:25:40.407 回答
0

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

（修改）JSON data/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>
于 2013-05-02T23:20:35.153 回答