重绘时，MeteorJS Packery布局具有重叠项

Question

我是Meteor的新手，也是Meteor的新手，所以我一直在犯错误 - 到目前为止，我已经设法解决了这些问题但是这个让我很好并且真的很难过。

我正在使用packery来布局一些包含项目信息的div，这些项目包含许多div，其中包含每个项目中任务的信息。到目前为止，当模板首次加载时，布局非常有效。

当我将一个新任务添加到其中一个项目（将其添加到Tasks集合）时，布局会重新绘制，但该项目现在会延长1行，与布局中的下一个项目重叠。

我已经重新使用了这里的答案（MeteorJS and Packery layout doesn't re-render when collection is updated），但这不适用于重绘。

projects.html：

<template name="projects">
  <div class='grid' id='allProjects'>
    {{#each project}}
      <div class='grid-item' id='project'>
        <div project content goes in here>
        </div>
      {{#each task}}
        <div id='task'>
          <div task content goes in here>
          </div>
        </div>
      {{/each}}
      </div>
    {{/each}}
  </div>
</template>

projects.js：

Template.projects.onRendered(function(){
  this.find('.grid')._uihooks = {
    insertElement: function(node, next){
      triggerPackeryLayout();
      $('.grid').append(node);
      $('.grid').packery('appended', node);
    }
  };
});

function triggerPackeryLayout(){
  var $grid = $('.grid');
  $grid.packery({
    itemSelector: '.grid-item'
  });
}

我认为这与重新布局布局的时间有关，因为当我向项目添加另一个任务时，使用模态窗口，布局会在模态打开时自行更正。

我是否需要延迟布局以允许从集合中加载新的“任务”项？