Meteor 1.3 - 一次将 div 的 3 个元素分组

Question

我正在使用 Meteor 1.3，我正在尝试创建一个模板，我从集合中加载文档，并为每个文档创建一个 div。我希望将它们分成三行，因为我使用的是 bootstrap 的 row class.

我试过每次索引取模3时打开一个div，然后放内容，然后关闭div。但是，Meteor 不能在 {{#if}} 内有未闭合的标签。实现我想要的解决方法是什么？我的代码显示了我想要应用的逻辑（显然它可以在 Meteor 0.8.0 之前运行）。

<template name="OrganizationsTpl">

    <div class="row">

    {{#each organizations}}

        {{#if modulo3 @index}} <!-- modulo3 is a  helper I defined -->
            {{#if @index}}     <!-- If index !=0 -->
    </div>
    <div class="row">
            {{/if}}
        {{/if}}

        <div class="col-lg-4">
            <h1>{{name}}</h1>
        </div>

    {{/each}}

    </div>

</template>

Answer 1

如果你直接在空格键之间插入HTML代码，我会报错。

所以在这里你可以定义一个助手，其中 return '</div><div class="row">' 作为一个字符串。然后在您的模板中，您可以使用 {{{}}} 将其呈现为 HTML。

<template name="OrganizationsTpl">
    <div class="row">
      {{#each organizations}}
          {{#if modulo3 @index}} <!-- modulo3 is a  helper I defined -->
              {{#if @index}} <!-- If index !=0 -->
                 {{{divBreak}}}
              {{/if}}     
         {{/if}} 
   <div class="col-lg-4">
    <h1>{{name}}</h1>
  </div>
 {{/each}}
</div>

您的帮助代码如下所示：

Template.OrganizationsTpl.helpers({
     'divBreak': function() {
         return '</div><div class="row">';
     }
});

Answer 2

您大概可以将您的组织列表拆分为一个 organizationsArray[][]（或一个对象），其中数组的右侧包含三个组织。

[0][organization0, organization1, organization2]
[1][anotherorganization, andanother, yetanother]

然后做这样的事情

{{#each organizationsArray}}
    <div class="row">
        {{#each organizations}}
            <div class="col-lg-4">
                <h1>{{name}}</h1>
            </div>
        {{/each}}
    </div>
{{/each}}

这不是一个有效的解决方案，但你明白了

Meteor 1.3 - 一次将 div 的 3 个元素分组

Meteor 1.3 - Group elements in div's 3 at a time

twitter-bootstrap

meteor

spacebars

meteor-blaze