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