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

Question

I am using Aurelia and Bootstrap grid. I am looping through some items from the view model, but need to add a clearfix after each 3 items in the grid. Problem is, I need to add this outside of the loop. HTML:

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

I could do something like this...

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

But I need it to be outside of the loop. What's the easiest way to do this?

Answer 1

Wrap your col-md-4 divs with a template. Then you can use the % (modulus) operator on an inner template element to only add the clearfix div when needed:

<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>

Now the clearfix will appear at index 2, 5 etc