当新数据加载砌体 js 时不重新加载（砌体 JS 和把手）答案

【问题标题】：When new data loads masonry js not reloading (Masonry JS and Handlebars)当新数据加载砌体 js 时不重新加载（砌体 JS 和把手）
【发布时间】：2017-09-21 08:38:59
【问题描述】：

我正在使用 Handlebars http://handlebarsjs.com/ 和 Masonry 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);
 });

非常感谢任何帮助。

提前致谢。

【问题讨论】：

标签： javascript jquery html handlebars.js jquery-masonry

【解决方案1】：

假设您的cardContainer 是Masonry Grid，要向网格添加更多项目（前置开始），您需要调用Masonry#prepended()。
上面的sn-p可以写成：

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

【讨论】：

是的，cardContainer 是砌体网格的 div 包装器。 model 是一个数组对象 let model = { posts: [] }
另外，compiledCardTemplate(model) 是将帖子添加到 dom 的把手
哦！那么您只需将您的模型编译（或转换）为某种 HTML repr。并将其包装在一个 jQuery 对象中。
让 cardContainer = $(".wrapper");让 cardTemplate = $("#card-template").html();让已编译的CardTemplate = Handlebars.compile(cardTemplate);
Masonry 不在乎您从哪里（以及如何）获取数据...所以只要 jQuery 对数据感到满意（它是有效的 HTML），您就可以开始使用并使用任何库（车把等）来获取您的 HTML...您只需要使用 Masonry#prepended() 方法通知 masonry 有关操作

【解决方案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);
}

【讨论】：