鑑於JSON數據/ css.json這樣：JS模板：if/else的價值如何？

{ "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類的價值== 「IMG」再注入：

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

別的注入：

{{syntaxe}}

？

來源

2013-05-02 Hugolpz

所以等待，傳入的數據看起來像JSON給出有？ – SpYk3HH 2013-05-02 15:59:51

是的。我想我已經正確地複製了它。如果您發現任何錯字錯誤，請注意我。 – Hugolpz 2013-05-02 16:02:06

@ j08691：可能會恢復標題「** Mustache.js：** if/else upon value？」。這個問題只適用於Mustache.js，讓它出現在標題中是很重要的，這是我們看到的任何問題的第一件事情。 – Hugolpz 2013-05-02 16:04:20

_{按照前文的回答表明評論}

另一種解決方案

_{上的元素使用jQuery的方法，它們在創建後。}

您可以使用jQuery的Selector，.each()和.replaceWith()方法templateing的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-03 03:25:40 SpYk3HH

_{更新！與「當前」的代碼在底部}

嘗試使用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")); 
     }); 
    } 
})

來源

2013-05-02 15:59:01 SpYk3HH

注意：我在Mustache的手冊上找不到任何東西，但我希望在#tpl中有一個原生的mustache.js解決方案。不過，謝謝你這樣做。 – Hugolpz 2013-05-02 16:11:14

老實說，不知道我的答案可能有助於使用「小鬍子」，因爲我不熟悉任何JS模板（我只是沒有看到它的一個要點），但我的答案會給你一個簡單的「jQuery Mark-處理「迭代數據並根據需要進行更改。 – SpYk3HH 2013-05-02 16:13:13

@Hugolpz在我的回答中增加了更多內容，即使您的小鬍子模板「應該」也能工作 – SpYk3HH 2013-05-02 22:43:40

最小的修改我FO如果/然後值是編輯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>

來源

2013-05-02 23:20:35 Hugolpz

JS模板：if/else的價值如何？

回答

另一種解決方案

jsFiddle Demo Here

相關問題