html - 如何为Meteor.js中的每个命令使用 Handlebars 填充引导网格系统？

我正在尝试每行显示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

您会看到第一行显示正常，但之后我得到了一些时髦的结果。而且，如果您通过查看页面源代码 check out 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>

对不起，我错过了很多次，近点!