如何遍历 Meteor 中两列的集合答案

【问题标题】：How to iterate through collection across two columns in Meteor如何遍历 Meteor 中两列的集合
【发布时间】：2016-02-04 01:33:47
【问题描述】：

我想要一个两列布局来显示返回的集合信息。现在我有一个两列布局，如：

<template name="Participants">
  <div class="container">
  <h4 style="text-align: center">{{ReportsMonth}} {{ReportsCamp}} {{ReportsYear}} {{ReportsTitle}}</h4>
{{#each programReports}}
    <div class="row">
      <div class="col s6">
        <h5>Name: {{FullName}}</h5>
        <p>Age: {{calculateAge Bdate}}<br> Sex: {{Sex}}<br> Level: {{Level}}<br> Location: {{City}}, {{State}}</p>
      </div>

      <div class="col s6">
        <h5>Name: {{FullName}}</h5>
        <p>Age: {{calculateAge Bdate}}<br> Sex: {{Sex}}<br> Level: {{Level}}<br> Location: {{City}}, {{State}}</p>
      </div>
    </div>
  {{/each}}
</div>
</template>

问题当然是当它迭代时，它会将文档重复到下一列；它只有在完成行时才会到达下一个文档。有没有办法让它迭代以用下一个文档填充每一行中的每个 div？

例子：

当前的 HTML 输出：

a a
b b

期望：

a c
b d

或者：

a b  
c d

【问题讨论】：

为什么不简单地有一个row，让网格系统做列流（每次迭代发出一个col s6）？
您说得对，先生。谢谢。

标签： meteor meteor-blaze

【解决方案1】：

对于第一个示例，我能想到的最佳方式（垂直数据行，同一行上的 c）：

将您的 programReports 分成两个助手：一个用于前半部分，一个用于后半部分。
在#each 循环之外创建一行和一个 col s6。
将您的项目连续放入每个循环中并 xs12。

如果有人有更好的方法来做这件事，我会很高兴，因为我必须自己做。

水平数据行示例（a b 在同一行）：

我认为对于这个，您只需要在每个循环中去掉第二个 col s6。不过我可能会误会。

【讨论】：

你明白了。 {{#each}} 需要在 div 行内并省略其他 col s6。