当新数据加载砌体js没有重新加载时（Masonry JS和Handlebars）

Question

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

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

例如

但是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，要在网格中添加更多项目（ prepend 开始），您需要调用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);
}

Answer 2

使用下面的代码解决了这个问题（非常感谢@ riyza-ali）

function AddToDom() {
 setTimeout(function () {

   let items = compiledCardTemplate(model);
   let $items = $(items);

   let grid = wrapper.masonry({
     itemSelector: '.grid-item',
     columnWidth: '.grid-item',
     horizontalOrder: true,
     fitWidth: true
   });

   grid.prepend($items).masonry('prepended', $items);

  }, 1000);
  setTimeout(AddToDom, 50000);
}