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

用col-md-4包裹您的template 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等

Answer 2

将外部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>

基于循环中的$ index，在Aurelia repeat.for循环之外添加元素

2 个答案: