javascript - masonryjs 和 mustachejs 之间的冲突

Question

我的 javascript 中某处有一个语法错误，似乎被忽略了。我可以通过文件将内容访问到 mustache 模板中，或者我可以对项目(图像和音频)进行硬编码并让这些项目使用 masonryjs 顺利填充页面。但是当我尝试添加两者时，其中一个或两个都不起作用。这是我的 CodePen

我希望发生的事情是从提供我的 mustache 模板的文档中生成我的页面。但它应该像 Pinterest 这样的网站一样平滑地堆叠，因为我使用了 masonryjs，所以图片会整齐地平铺。

这是使用 Masonry 的代码

HTML

<div id="content" class="container clearfix">

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/1.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/1.wav">
    </audio>
  </div>

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/2.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/2.wav">
    </audio>
  </div>

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/3.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/3.wav">
    </audio>
  </div>

  <div class="item">
    <img src="http://assets.wtfisthat.info/img/4.JPG" alt="" />
    <audio controls>
      <source src="http://assets.wtfisthat.info/audio/4.wav">
    </audio>
  </div>
<!-- The rest of the items handcoded -->
</div> <!--/ #container -->

JS

$(document).ready(function() {

  // Initialize Masonry
  $('#content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
      $(this).masonry('reload');
    });

});

但是当我添加 mustache 使其不是手工编码时，它就会失败。我试过这样做

HTML

<div id="content" class="container clearfix">
  <div id="image-list"></div>


  <script id="imgtpl" type="text/template">
    {{#images}}
      <div class="item">
        <img src="http://assets.wtfisthat.info/img/{{img}}" alt="{{alt}}">
        <audio controls>
          <source src="http://assets.wtfisthat.info/audio/{{id}}.wav">
        </audio>
      </div>
    {{/images}}
  </script>
</div> <!--/ #container -->

JS

// Streams in the data from the JSON file
$(function() {
  $.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js',   function(data) {
    var template = $('#imgtpl').html();
    var html = Mustache.to_html(template, data);
    $('#image-list').html(html);
  });
});

$(document).ready(function() {

  // Initialize Masonry
  $('#content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
    $(this).masonry('reload');
  });

});

Answer 1

在这里解决:http://codepen.io/anon/pen/MwJXpW

我已经更改了您的代码，以便将新元素附加到现有元素，而不是将它们放入自己的 div 中。

然后，您应该在添加元素后使用 masonry('appended', $elements)，如本页所述:adding items .

这是修改后的脚本:

$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js', function(data) {
    var template = $('#imgtpl').html();
    var html = Mustache.to_html(template, data);
    var $html = $(html)
    $('#content').append($html).masonry( 'appended', $html); 
  });