当新数据加载 masonry js 时不重新加载（Masonry JS 和 Handlebars）

Question

我正在使用 Handlebars http://handlebarsjs.com/ and Masonry https://masonry.desandro.com/ 获取一些 JSON 数据并使用 Jquery 前缀每 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, to add to the start (prepend to start) more items to the Grid you need to call 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);
}

当新数据加载 masonry js 时不重新加载（Masonry JS 和 Handlebars）

When new data loads masonry js not reloading (Masonry JS and Handlebars)

javascript

jquery

html

handlebars.js

jquery-masonry