MeteorJs和Masonry

Question

我正在使用MeteorJS（太棒了:)），开发简单的应用程序。我想使用砌体，所以我使用的是sjors：meteor-masonry包。

当我使用此代码时，一切正常：

var itemsData = [
{
title: 'First item',
description: 'Lorem 1',
price: 20
},
{
title: 'Secounde item',
description: 'Lorem 2',
price: 40
},
{
title: 'Third item',
description: 'Lorem 3',
price: 10
},
{
title: 'Fourth item',
description: 'Lorem 4',
price: 10
},
{
title: 'Five item',
description: 'sit 4',
price: 10
}

];

Template.itemsList.helpers({
items: itemsData
});

Template.itemsList.rendered = function() {

    var container = document.querySelector('#main');
    var msnry = new Masonry( container, {
    // options
    columnWidth: 200,
    itemSelector: '.item'
    });
};

但是当我将Template.itemsList.rendered的部分（代码）更改为砌体时不起作用：

Template.itemsList.helpers({
items: function() {
return Items.find();
}
});

有什么想法吗？

修改

的myapp / LIB /集合/ items.js

Items = new Mongo.Collection('items');

它是从mongoshell填充的whit数据。数据还可以，但砖石不起作用。

编辑2

砌体在屏幕调整大小时停止动画，网格无法正常工作。没有错误。

的myapp /客户端/模板

<template name="itemSingle">
<div id="profile-widget" class="panel item">
<div class="panel-heading">
            </div>
            <div class="panel-body">
               <div class="media">

                  <div class="media-body">
                     <h2 class="media-heading">{{title}}</h2>
                     {{description}}
                  </div>
               </div>
            </div>
            <div class="panel-footer">
               <div class="btn-group btn-group-justified">
                  <a class="btn btn-default" role="button"><i class="fa fa-eye"></i> 172</a>
                  <a class="btn btn-default" role="button"><i class="fa fa-comment"></i> 34</a>
                  <a class="btn btn-default highlight" role="button"><i class="fa fa-heart"></i> 210</a>
               </div>
            </div>

</div>
</template>

<template name="itemsList">

<div id="main">
{{#each items}}
{{> itemSingle}}
 {{/each}}
</div>

</template>

Answer 1

我遇到了同样的问题，但从未找到完美的解决方案。 我尝试使用setTimout()解决方法解决：

Template.main.rendered = function() {
    setTimeout(function() {
        $('#container').masonry({
            columnWidth: 35,
            itemSelector: '.thumb',
            gutter: 10,
            isFitWidth: false
        });
    }, 1);  
}