Question

我无法从JSON获取数据以插入单个div。我希望每个图像/视频插入到他们自己的

中

<div class="item"></div>

目前，每个对象都在“item”类中相互叠加（使用我给定的模板HTML）。我认为必须要告诉Mustache将数组中的每个对象插入到它自己的div中，并使用类“item”，这样最终的结果将是两个div，每个模板内的模板中都有HTML。

我有JSON数据：

{ "pictures" : [
  {
    "image": "1",
    "videourl": "http://www.youtube.com/embed/"
  },
  {
    "image": "4",
    "videourl": "http://www.youtube.com/embed"
  }
]}

我有一个模板设置：

{{#pictures}}

    <div class="videoplay-main animated fadeIn" data-videourl="{{videourl}}">
        <img src="img/frontpage/{{image}}.jpg" />
    </div>

{{/pictures}}

我有JS：

$.getJSON('js/data.json', function(data){
    var homeTemplate = $("#slider-template").html();
    var html = Mustache.render(homeTemplate, data);
    $('.item').html(html);
});

Answer 1

那么你必须这样做：

{{#pictures}}
   <div class="item">
      <div class="videoplay-main animated fadeIn" data-videourl="{{videourl}}">
         <img src="img/frontpage/{{image}}.jpg" />
      </div>
   </div>
{{/pictures}}

通过Mustache JS循环

1 个答案: