如何使用Meleb.js中每个命令的把手填充引导网格系统？

Question

我试图每行显示3个项目.我的模板看起来像这样:( 更新)

 <template name="projectList">
   {{breakTimeReset}}
   <div class=row>          
  {{#each projects}}

    {{> projectItem}}

        {{#if breakTime}}
        </div>
        <div class=row>
        {{/if}}

   {{/each}}
   </div>
</template>

正如您在数据库中看到的每个项目,我输出projectItem.我想输出它们,所以每3个项目都包含在一个

这是我的助手

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,您将看到与我的代码不匹配,这很奇怪.

如果这是一个令人困惑的问题,请告诉我.谢谢!

Answer 1

您可以在呈现数据之前对其进行分组:

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>

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