Question

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

<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

Answer 1

我可以想到第一个例子的最佳方式（垂直数据行，同一行上的c）：

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

如果有人有更好的方法，我会喜欢它，因为我必须自己做。

水平数据行示例（同一行上的b）：

我认为对于这个你只需要摆脱每个循环中的第二个col s6。我可能会误解一些事情。

如何在Meteor的两列中迭代集合

1 个答案: