6

我正在尝试每行显示 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，您会发现与我的代码不匹配，这很奇怪。

让我知道这是否是一个令人困惑的问题。谢谢！

4

3 回答 3

7

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

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>

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

于 2013-09-08T07:38:55.227 回答
1

您也可以使用纯 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>
于 2016-08-31T07:33:17.897 回答
0

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

以前的：

哦，近点粘在他的枪上，我错了！Handlebars 解析每个模板并“修复”它，因此标签的数量是偶数。编辑以反映这一点。

模板

<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 ""
于 2013-09-07T21:17:48.563 回答