javascript - 当新数据加载时，masonry js 不会重新加载(Masonry JS 和 Handlebars)

Question

我正在使用 Handlebars http://handlebarsjs.com/和砖石https://masonry.desandro.com/获取一些 JSON 数据并使用 Jquery prepend 每 5 分钟将其添加到 dom。

我遇到的问题是我第一次将数据添加到 dom Masonry 工作正常并水平显示

例如。

但是 5 分钟后，当添加新数据时，它只是垂直放置。它应该预先考虑并移动其他元素。

例如。

添加到 dom 的函数。

function AddToDom() {
   console.log("AddToDom");
   setTimeout(function() {
     cardContainer.prepend(compiledCardTemplate(model)).masonry({
       itemSelector: '.grid-item',
       columnWidth: '.grid-item',
       // percentPosition: true,
       horizontalOrder: true,
       fitWidth: true
     });
   }, 1000);
}

我使用 setTimeout 作为从数据检索到添加到 dom 的延迟。

编辑:根据阿里的建议，我尝试了这个

function AddToDom() {
  setTimeout(function() {
    let $items = compiledCardTemplate(model);
    cardContainer.append($items).masonry('prepended', $items);
  }, 1000);
}

但我收到此错误

masonry not initialized. Cannot call methods, i.e. $().masonry("prepended")

编辑:为了清晰起见

let cardContainer = $(".wrapper");
let cardTemplate = $("#card-template").html();
let compiledCardTemplate = Handlebars.compile(cardTemplate);

let model = {
 posts: []
}

编辑:调用的函数

 // docuemnt init
 $(document).ready(function () {
   GetData();
   AddToDom();
   setInterval(AddToDom, 50000);
 });

非常感谢任何帮助。

提前致谢。

Answer 1

假设您的 cardContainer 是 Masonry Grid ，要将更多项目添加到网格的开头(前置)，您需要调用 Masonry#prepended() .
上面的代码片段可以写成:

function addToDOM(model) {
  setTimeout(function() {
    var $item = $(compiledCardTemplate(model));
    $cardContainer
      .prepend($item)  // to prepend to DOM node
      .masonry('prepended', $items); // to notify masonry
  }, 1000);
}