我试图每行显示3个项目.我的模板看起来像这样:(更新)
<template name="projectList">
{{breakTimeReset}}
<div class=row>
{{#each projects}}
{{> projectItem}}
{{#if breakTime}}
</div>
<div class=row>
{{/if}}
{{/each}}
</div>
</template>
正如您在数据库中看到的每个项目,我输出projectItem.我想输出它们,所以每3个项目都包含在一个
这是我的js助手
Template.projectList.helpers({
projects: function() {
return Projects.find();
},breakTimeReset: function() {
Template.projectList.doCount = 0;
},breakTime: function () {
count = Template.projectList.doCount + 1;
console.log(count);
Template.projectList.doCount = count;
if (count % 3 == 0) {
console.log("Started break");
return true;
}
else
return false;
}
});
我的问题是如何设置它以便每行有3个项目,然后它知道在每3个项目之后插入一个新的行div？我目前设置它的方式导致非常时髦的结果,因为新的div将在项目之前插入是不可靠的.
在这里查看结果：http://testprojectapp.meteor.com
你会看到第一行显示正常,但之后我得到一些时髦的结果.如果您通过查看页面源检查DOM,您将看到与我的代码不匹配,这很奇怪.
如果这是一个令人困惑的问题,请告诉我.谢谢！
解决方法
您可以在呈现数据之前对数据进行分组：
Template.projectList.helpers({
projects: function () {
all = Projects.find({}).fetch();
chunks = [];
size = 3
while (all.length > 3) {
chunks.push({ row: all.slice(0,3)});
all = all.slice(3);
}
chunks.push({row: all});
return chunks;
},breakTimeReset: function () {
Template.projectList.doCount = 0;
},breakTime: function () {
count = Template.projectList.doCount + 1;
console.log(count);
Template.projectList.doCount = count;
if (count % 3 == 0)
return "</div><!-- why? --><div class='row'>"
else
return ""
}
});
<template name="projectList">
{{breakTimeReset}}
{{#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>
对不起,我错过了很多次,近点！
