首先感谢您的帮助并原谅我的婴儿Meteor和Bootstrap技能.我对
here提出的问题提出了类似的问题,该问题产生了一些建议但没有解决方案.我想使用#each在Meteor模板中使用来自MongoDB的数据填充BootStrap网格.由于BootStrap网格有12列,我想每行显示4个’单元’,我相信我需要 –
>使用创建一行.
>输出…元素内的四个数据元素…
>用’关闭’row div’.
>使用…创建下一行
>从步骤2中冲洗并重复.
使用从{{#each …}}块返回数据/集合中的数据来执行步骤2.
我的流星模板看起来像这样(我从优秀的’发现流星’一书中扩展了一个例子) –
<template name="postsList">
<div class="posts">
<div class='row-fluid' style="margin-left:1%">
{{breakInit}}
{{#each posts}}
<div class="span3">
{{> postItem}}
</div>
{{breakNow}}
{{/each}}
</div>
</div>
</template>
助手的JavaScript看起来像这样 –
Template.postsList.breakInit = function() {
Template.postsList.docCount = 0 ;
};
Template.postsList.breakNow = function() {
count=Template.postsList.docCount + 1 ;
result="";
if ( count == 4 ) {
count = 0 ;
Template.postsList.docCount = count ;
result="</div><div class=row>" ;
};
Template.postsList.docCount = count ;
return new Handlebars.SafeString(result);
};
这一切似乎都有效,至少在计算#each输出的元素方面,返回< / div>< div class = row>开始一个新行并重置计数器…但是…返回的HTML结束当前行并开始下一行似乎不是由我期望的Bootstrap(或Meteor或我的浏览器)处理的.它似乎重新排序为< div class = row>< / div>.从FireFox中的Inspector看到这个屏幕上限(代码输出6个元素,第一行4个,第二个2个) –
<div id="main" class="row-fluid">
<div class="posts">
<div class="row">
<div class="span3"> … </div>
<div class="span3"> … </div>
<div class="span3"> … </div>
<div class="span3"> … </div>
<div class="row"> … </div> <-- The problem...
<div class="span3"> … </div>
<div class="span3"> … </div>
</div>
</div>
</div>
请注意< div class = row> …< / div>在跨度的中间？看起来不对,它应该关闭前一个’行’DIV并开始下一个.任何人都可以建议修复我的代码或使用Meteor中的动态数据弹出网格的替代方法吗？
解决方法
您可以在呈现数据之前对其进行分组：
Template.projectList.helpers({
projects: function () {
all = Projects.find({}).fetch();
chunks = [];
size = 4;
while (all.length > size) {
chunks.push({ row: all.slice(0,size)});
all = all.slice(size);
}
chunks.push({row: all});
return chunks;
}
});
<template name="projectList">
{{#each projects}}
{{> projectRow }}
{{/each}}
</template>
<template name='projectRow'>
<div class='row span12'>
{{#each row }}
{{> projectItem}}
{{/each}}
</div>
</template>
<template name="projectItem">
<div class="span4">
<h3><a href="{{projectPagePath this}}"> {{title}} </a></h3>
<p> {{subtitle}} </p>
<p> {{description}} </p>
<p><img src="{{image}}"/></p>
<p> {{openPositions}} </p>
</div>
</template>
