文章/答案/技术大牛

发布

社区首页 >问答首页 >更新集合时，MeteorJS和Packery布局不会重新呈现

问更新集合时，MeteorJS和Packery布局不会重新呈现
EN

Stack Overflow用户

提问于 2015-04-14 06:29:23

回答 1查看 394关注 0票数 4

我正在将MeteorJS集合与打包程序集成在一起，以获得一个类似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>

packery

meteor

回答 1

Stack Overflow用户

发布于 2015-08-27 15:26:18

我刚刚找到了这个问题的解决方案，关键是_uihooks！这将在集合中的更改之后、Blaze响应式地更新DOM之前调用所需的函数。

不知道你为什么把砖石和包装混在一起。我的解决方案是严格意义上的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 v1.0.4,2015-3-17 uihooks文档：https://github.com/meteor/meteor/blob/master/History.md#blaze-2

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29616146

复制

相似问题

问更新集合时，MeteorJS和Packery布局不会重新呈现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更新集合时，MeteorJS和Packery布局不会重新呈现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更新集合时，MeteorJS和Packery布局不会重新呈现
EN