更新集合时 MeteorJS 和 Packery 布局不会重新渲染

Question

我正在将 MeteorJS 集合与 Packer 集成以实现类似 Pinterest 的界面。

我有一个问题，当一个新项目被添加到由 Packery（或 Masonry，同样的问题）呈现的集合中时，新项目只是漂浮在容器的左上角，而不是通过Packery 布局处理器。

triggerMasonryLayout = function () {
  var $container = $('#masonry-layout');
  console.log("AUTORUN PACKERY", $container);

  $container.packery({
    itemSelector: '.item',
    gutter: 20,
    columnWidth: 300
  });

  $container.packery();
}

Template.bookingsProfileItem.onRendered( function() {
  triggerMasonryLayout();
});

<template name="bookingsProfileItem">

  <div class="item">
    ...

<div id="masonry-layout">
  {{#each properties}}
    {{> bookingsProfileItem}}
  {{/each}}
</div>

Answer 1

我刚刚想出了解决这个问题的方法，关键是_uihooks！这将在集合更改之后和 Blaze 响应式更新 DOM 之前调用您想要的函数。

不知道您为什么将 Masonry 和 Packery 混合在一起。我的解决方案是严格的 Packery。

bookingsProfileItem.js

var triggerPackeryLayout = function () {
  var $container = $('#packery-layout');

  $container.packery({
    itemSelector: '.item',
    gutter: 20,
    columnWidth: 300
  });
}

Template.bookingsProfileItem.onRendered(function() {
  this.find('#packery-layout')._uihooks = {
     //when new items are added to collection
     insertElement: function(node, next) {
        triggerPackeryLayout();
        $('#packery-layout').append(node);
        $('#packery-layout').packery('appended', node);
     }
  }
});

bookingsProfileItem.html

<template name="bookingsProfileItem">
    <div class="item">
      {{...}}
    </div>
</template>

<div id="packery-layout">
  {{#each properties}}
    {{> bookingsProfileItem}}
  {{/each}}
</div>

从 RainHaven 的 Meteor UI Hooks Demo 中获得了我的参考资料： https://github.com/RainHaven/meteor-ui-hooks-demo/blob/master/simple-todos.js

Meteor 于 2015 年 3 月 17 日发布的关于 uihooks 的 v1.0.4 文档： https://github.com/meteor/meteor/blob/master/History.md#blaze-2