3

私は次の口ひげテンプレートを持っています:

<script id="pictures" type="text/template">
{{#images}}
  <li id="dndtemplate">
    <img src={{img}} title={{imgnimi}} alt={{imgnimi}} <span>{{imgnimi}}</span> 
  </li>
{{/images}}
</script>

そして、jsonファイルにある番号または画像の自動インクリメントを備えたクラス「dnd」をimgタグに追加する必要があります。私はこのようにしましたが、うまくいきません。

$(function() {
 $.getJSON('image.json', function(image) {
   var template = $('#pictures').html(function(){
     for (var i = 0; i <= img.length[]; i++);
      $("#pictures").getElementsByTagName("img").addClass("dnd"+i);
      i++;
     });
     var html = Mustache.to_html(template, image);
     $('#dndtemplate').html()           

  }); //getJSON
}); //function</script>

jsonはここにあります：

{ 
"images" : [
    {"img" : "images/tytto_60x80.png", 
    "imgnimi" : "Vilja"},
    {"img" : "images/tytto2_60x80.png", 
    "imgnimi" : "Katri"},
    {"img" : "images/tytto3_60x80.png", 
    "imgnimi" : "Mari"},
    {"img" : "images/tytto4_60x80.png",
    "imgnimi" : "Larissa"},
    {"img" : "images/tytto5_60x80.png",
    "imgnimi" : "Alice"},
    {"img" : "images/tytto6_60x80.png",
    "imgnimi" : "Helena"},
    {"img" : "images/poika1_60x80.png",
    "imgnimi" : "Jesse"},
    {"img" : "images/poika2_60x80.png",
    "imgnimi" : "Lauri"},
    {"img" : "images/poika3_60x80.png",
    "imgnimi" : "Petri"},
    {"img" : "images/poika4_60x80.png",
    "imgnimi" : "Joonas"},
    {"img" : "images/poika5_60x80.png",
    "imgnimi" : "Valtteri"},
    {"img" : "images/poika6_60x80.png",
    "imgnimi" : "Vesa"},    
    {"img" : "images/auto_110x60.png",
    "imgnimi" : "auto"}

]}

助けていただければ幸いです

4

1 に答える 1

2

mustache はロジックのないテンプレートであるため、ここでインクリメンタル ロジックを適用することはできません。ただし、いくつかの回避策があり、コードは次のとおりです。

まず、テンプレートを更新する必要があります。

<script id="pictures" type="text/template">
  <li id="dndtemplate">
      <img src="{{img}}" title="{{imgnimi}}" alt="{{imgnimi}}" class="{{dndClass}}" /> <span> {{imgnimi}} </span> 
  </li>
</script>

次に、返された JSON オブジェクトを反復処理する必要があります。

var template = $("#pictures").html();
$.each(imgObj.images, function(i, data) {
    data.dndClass = "dnd"+i;
    var html = Mustache.to_html(template, data);
    $('#resultList').append(html);
});

デモ

これがうまくいくことを願っています。

于 2013-04-04T10:43:24.510 に答える