Question

我使用#each迭代器使用Blaze迭代Meteor中的一个项目数组，我希望在每个第n个（第10个）项目之后插入一个HTML元素。我想我可以使用@index来访问我所在的数组的索引，但是我并不知道如何每10个元素插入另一个元素。

{{#each getArray}}
  <div class="item" data-value="{{someHelper @index}}">{{this}}</div>
{{/each}}

Answer 1

你可以使用modulo（％），它取两个数字的余数。例如11％3 = 2，因为3在11中适合3次，留下2也称为余数。

Template.TemplateName.helpers({
    'someHelper': function(whichOne){
        if (whichOne%10 == 0){
            yourArray.push(<newElement>);
        }
    }
});

每当哪个％10为零时，你就会击中阵列中的第十个元素。

Answer 2

根据您的评论，您似乎想要创建一个自定义帮助程序，它返回您是否应该在DOM中有一个元素：

{{#each getArray}}
  <div class="item" data-value="{{someHelper @index}}">{{this}}</div>
  {{#if shouldAddDiv @index}}
    <div>I was after the 10th item!</div>
  {{/if}}
{{/each}}

Template.TemplateName.helpers({
  shouldAddDiv(index) {
    if(index % 10 === 0) {
      return true;
    } else {
      return false;
    }
  }
});

如果您不希望div出现在第一个元素之后，您可以将index % 10更改为index % 9

Meteor - 在每个第n个项目之后插入另一个HTML元素的数组的#each迭代

2 个答案: