更新集合时,MeteorJS和Packery布局不会重新呈现

2023年7月28日 296次阅读

我正在将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>

最佳答案 我刚刚找到了解决这个问题的方法,关键是_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

关于uihooks的Meteor的v1.0.4,2015-Mar-17文档：
https://github.com/meteor/meteor/blob/master/History.md#blaze-2

点赞