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

1

以前の回答のコメントに従って提案されたとおり

別の解決策

要素が作成された後、要素に対して 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へのリンク(彼が使用していると思います)

于 2013-05-03T03:25:40.407 に答える