根据循环内的 $index 在 Aurelia repeat.for 循环外添加元素

Question

我正在使用 Aurelia 和 Bootstrap 网格。我正在循环查看视图模型中的一些项目，但需要在网格中的每 3 个项目之后添加一个 clearfix。问题是，我需要在循环之外添加它。 HTML:

<div class="col-md-4" repeat.for="item of items">
    <div class="inner">
    </div>
</div>

我可以做这样的事情...

<div if.bind="$index = 2" class="clearfix"></div>

但我需要它在循环之外。最简单的方法是什么？

Answer 1

将外部 div 包裹在 template 元素中，然后将 repeat.for 放在那个 template 元素上。

<template repeat.for="item of items">
  <div class="col-md-4">
      <div class="inner">
      </div>
  </div>
  <div if.bind="$index % 3 === 2" class="clearfix"></div>
</template>

Answer 2

用 template 包装您的 col-md-4 div。然后，您可以在内部 template 元素上使用 %（模数）运算符，仅在需要时添加 clearfix div：

<template repeat.for="item of items">
  <div class="col-md-4">
      <div class="inner">
      </div>
  </div>
  <template if.bind="$index % 3 === 2">
    <div class="clearfix"></div>
  </template>
</template>

现在 clearfix 将出现在 index 2、5 等

根据循环内的 $index 在 Aurelia repeat.for 循环外添加元素

Add element outside of Aurelia repeat.for loop based on $index inside of loop

html

repeat

twitter-bootstrap

aurelia