masonryjs和mustachejs之间的冲突

Conflict between masonryjs and mustachejs

本文关键字：冲突 之间 mustachejs masonryjs      更新时间：2023-09-26

我有一个语法错误在我的javascript的某个地方，似乎是滑过。我既可以通过文件访问内容到mustache模板，也可以硬编码项目(图像和音频)，并使用masonryjs使项目顺利地填满页面。但是当我试着把两者都加起来的时候，两者都不行。这是我的CodePen

我期望发生的事情是从给我的mustache模板的文档生成我的页面。但它应该像Pinterest这样的网站一样平滑地堆叠，因为我使用了masonryjs。

下面是使用砌体

的代码

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');
    });
});

但是当我添加了小胡子，这样它就不是手工编码的，然后它就失败了。我试着做这个

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');
  });
});

此处解决:http://codepen.io/anon/pen/MwJXpW

我已经改变了你的代码，以便新元素被附加到现有的元素，而不是把它们推到自己的div中。

然后，一旦添加了元素，就应该使用masonry('appended', $elements)，如本页所述:添加项。

修改后的脚本如下:

$.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); 
  });
相关文章：