3

我有以下胡子模板：

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

我必须在 img 标记中添加一个类“dnd”，并为我在 json 文件中的数字或图像自动递增。我已经这样做了，但它不起作用。

$(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 回答