Meteor

Question

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

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

Answer 1

您可以使用模 (%)，取两个数的余数。例如 11%3 = 2，因为 3 在 11 中有 3 次，剩下 2 也就是余数。

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

只要 whichOne%10 为零，您就达到了数组中的第十个元素。

Answer 2

根据您的评论，您似乎想要制作一个自定义助手 returns 无论您是否应该在 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 元素

Meteor - #each iteration of an array with another HTML element inserted after each nth item

javascript

arrays

each

meteor-blaze