Question

我用Meteor创建了一个使用Masonry的测试项目。我添加了包mrt：jquery-masonry（或同位素：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;
}

砖石-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>

砖石-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被创建了;然而，它并没有遵循砌体规则。新创建的项目刚刚与第一个项目重叠，但我希望它能够执行追加到最后一个项目的方式。

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

Answer 1

模板名称插入中的masonry中存在拼写错误。
检查包状态，许多mrt包不再受到良好支持。

Answer 2

当流星进行部分渲染时，元素需要存在于DOM中以便砌体工作。所以有两种方法来解决问题 1）按钮单击发生时隐藏或取消隐藏元素要么 2）重新渲染DOM

您可以使用chrome dev工具查看触摸/刷新的DOM元素（绿色）。

Show paint rectangles settings

砌体与Meteor

2 个答案: