石工不能與流星一起正常工作

Question

我已經使用Mesonor創建了一個使用石工的測試項目。 我添加了包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;
}

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。 但是，它不是按照砌築規則放置的。 新創建的項目只是與第一個項目重疊，但是我希望它能執行追加到最后一個項目的方式。

如果有人可以幫助我，我將不勝感激。 提前致謝！

Answer 1

模板名稱插入中的masonry有錯字。
檢查軟件包狀態，不再很好地支持許多mrt軟件包。

Answer 2

當流星進行部分渲染時，該元素需要在DOM中存在才能使磚石工作。 因此，有兩種方法可以解決問題：1）單擊按鈕時隱藏或取消隱藏元素；或2）重新渲染DOM。

您可以使用chrome dev工具查看觸摸/刷新了哪些DOM元素（綠色）。

顯示繪畫矩形設置

石工不能與流星一起正常工作

問題描述

2 個解決方案

解決方案1
0 2015-07-01 20:52:27

解決方案2
0 已采納 2015-07-02 15:15:41

石工不能與流星一起正常工作

問題描述

2 個解決方案

解決方案1 0 2015-07-01 20:52:27

解決方案2 0 已采納 2015-07-02 15:15:41

解決方案1
0 2015-07-01 20:52:27

解決方案2
0 已采納 2015-07-02 15:15:41