砌体无法与 Meteor 一起正常工作

Question

我已经创建了一个使用 Masonry 的 Meteor 测试项目。我添加了包 mrt:jquery-masonry(or isotope:isotope)，一开始效果很好。然而，现在问题来了。

基本上，我想实现当用户点击按钮时，页面会增加一个功能div。下面是我的代码：

main.html

<body>
  <div class="container">
    {{> masonryContent}}
  </div>

  <script>
    (function($){
      var $container = $('.masonry-container');
      $container.masonry({
        columnWidth: 300,
        gutterWidth: 50,
        itemSelector: '.masonry-item'
      })
    }(jQuery));
  </script>
</body>

style.css

.masonry-item {
  width: 300px;
}

masonry-content.html

<template name="masonryContent">
  <div class="masonry-container">
    <div class="masonry-item">
      <p>blabla...</p>
      <p>
        <a href="#" role="button" id="click-me">Button</a>
      </p>
    </div>
    <div class="masonry-item">
      <p>test...</p>
    </div>
    <div class="masonry-item">
      <p>another test...</p>
    </div>

    {{#if showItem}}
    <div class="masonry-item">
      <p>new added item...</p>
    </div>
    {{/if}}
  </div>
</template>

masonry-content.js

Template.masonryContent.events({
  "click #click-me": function(e) {
    e.preventDefault();
    Session.set('show_me', true);
  }
});

Template.masonryContent.helpers({
  showItem: function() {
    return !!Session.get('show_me');
  }
});

问题是当我点击按钮时，创建了新的 div；但是，它不是按照 Masonry 规则放置的。新创建的项目刚刚与第一项重叠，但我希望它执行附加到最后一项的方式。

如果有人能帮助我，我将不胜感激。提前致谢！

Answer 1

模板名称插入中 masonry 有错别字。
检查包状态，许多 mrt 包不再得到很好的支持。

Answer 2

由于流星会进行部分渲染，因此元素需要存在于 DOM 中才能使砌体工作。所以有两种方法可以解决这个问题 1）点击按钮时隐藏或取消隐藏元素要么 2) 重新渲染 DOM

您可以使用 chrome 开发工具来查看哪些 DOM 元素是 touched/refreshed（绿色）。

砌体无法与 Meteor 一起正常工作

Masonry doesn't work properly with Meteor

meteor

jquery-masonry