更新集合时，MeteorJS 和 Packery 布局不会重新渲染 [英] MeteorJS and Packery layout doesn't re-render when collection is updated
问题描述
我正在将 MeteorJS 集合与 Packer 集成以获得类似 Pinterest 的界面.
我遇到了一个问题，当一个新项目被添加到由 Packery(或 Masonry，同样的问题)呈现的集合中时，新项目只是漂浮在容器的左上角，而不是通过Packery 布局处理器.
triggerMasonryLayout = function () {var $container = $('#masonry-layout');console.log("AUTORUN 包装", $container);$container.packery({itemSelector: '.item',天沟:20，列宽:300});$container.packery();}Template.bookingsProfileItem.onRendered( function() {triggerMasonryLayout();});<div class="item">...{{#每个属性}}{{>预订资料项目}}{{/每个}}我刚刚想出了这个问题的解决方案，关键是 _uihooks！这将在集合更改之后和 Blaze 被动更新 DOM 之前调用您想要的函数.
不知道您为什么将 Masonry 和 Packery 混为一谈.我在这里的解决方案是严格的 Packery.
bookingsProfileItem.js
var triggerPackeryLayout = function () {var $container = $('#packery-layout');$container.packery({itemSelector: '.item',天沟:20，列宽:300});}Template.bookingsProfileItem.onRendered(function() {this.find('#packery-layout')._uihooks = {//当新项目被添加到集合时插入元素:函数(节点，下一个){triggerPackeryLayout();$('#packery-layout').append(node);$('#packery-layout').packery('appended', node);}}});bookingsProfileItem.html
<div class="item">{{...}}<div id="packery-layout">{{#每个属性}}{{>预订资料项目}}{{/每个}}
从 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
I'm integrating MeteorJS collection with Packer for a Pinterest-like interface.
I'm having an issue that when a new item is added to the collection which is rendered by Packery (or Masonry, same issue), the new item just floats on top left of the container, and is not run through the Packery layout processor.
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>
I just figured out the solution to this problem and the key is _uihooks! This will invoke the functions you want after the change in the collection and before Blaze reactively update the DOM.
Not sure why you mixed Masonry and Packery into one. My solution here is strictly 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>
Got my references from RainHaven's Meteor UI Hooks Demo: https://github.com/RainHaven/meteor-ui-hooks-demo/blob/master/simple-todos.js
Meteor's v1.0.4, 2015-Mar-17 documentation on uihooks: https://github.com/meteor/meteor/blob/master/History.md#blaze-2
这篇关于更新集合时，MeteorJS 和 Packery 布局不会重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
