javascript - 循环 Mustache JS

Question

我无法从 JSON 获取数据并将其插入到各个 div 中。我希望每个图像/视频网址插入到自己的

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

目前，每个对象都被插入到“item”类中的彼此之上(使用我给定的模板 HTML)。我认为必须有办法告诉 Mustache 将数组中的每个对象插入到它自己的带有“item”类的 div 中，这样最终结果将是两个 div，每个 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}}