Javascript 建筑与砌体

我正在使用MeteorJS（太棒了：），来开发简单的应用程序。我想用砖石，所以我用的是sjors:meteor砖石包

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

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/collections/items.js

它由来自mongoshell的数据填充。数据是可以的，但砖石结构不起作用

编辑2

圬工停止在屏幕上设置动画，调整大小，网格不能正常工作。没有错误

myapp/客户端/模板

{{title}}
{{description}}
172
34
210
{{{#每项}
{{>itemsignle}
{{/每个}}

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

setTimout（）

解决方法解决：

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

---

您在哪里定义

项

集合？怎么做？你能更清楚一点到底是什么不起作用吗？您是否将数据绘制到屏幕上，但网格布局混乱？或者，这些项目不再是图纸了吗？如果是网格布局，您可以发布您的itemsList模板吗？以及您看到的任何错误消息？谢谢，我会尝试。不，我没有让它工作。但你的帮助是非常感激的，肯定会帮助别人。可能是我代码中的其他内容导致了问题。我最终放弃了使用砖石。

<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>

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