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>

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

Answer 2

你也可以使用普通的CSS做到这一点。 Foundation Framework有一个网格系统，您需要在网格元素中定义列，而不是在子元素本身中定义列，并且有人将其调整为与引导程序一起使用。这意味着您可以简单地添加越来越多的元素，网格将对它们进行布局。

https://github.com/JohnnyTheTank/bootstrap-block-grid

<div class="block-grid-xs-2 block-grid-sm-3 block-grid-md-4">
    <div>
        Content 1
    </div>
    <div>
        Content 2
    </div>
    <div>
        Content 3
    </div>
    <div>
        Content 4
    </div>
    <div>
        Content 5
    </div>
    <div>
        Content 6
    </div>
</div>

Answer 3

更新：失败，因为模板引擎很有帮助，并且不会让您拥有跨越模板的标签。它会平衡每一个，即使你只是尝试注入文本。如果你需要它很好，我不是粉丝。

一个：

哦，近点坚持他的枪，我错了！把手解析每个模板并修复＆＃39;它所以有偶数个标签。编辑反映这一点。

模板

<template name='sureties'>
{{breakTimeReset}}

{{#each allSureties }}

  {{name}}

  {{{breakTime}}}

{{/each}}
</template>

一些助手功能

Template.sureties.breakTimeReset = ->
  Template.sureties.docCount = 0
  ''
Template.sureties.breakTime = ->
  count = Template.sureties.docCount + 1 or 0
  console.log  count
  Template.sureties.docCount = count
  if count % 3 is 0
    return "</div><div class="">
  else
    return ""

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

3 个答案: