Get Root $index Value From Within Nested Aurelia Repeaters

Last updated: July 14, 2017

Recently in an Aurelia project, I was working with nested repeaters (3 levels deep). The problem was I needed to get the $index from the top level repeater (so, level one). Instinctively, I presumed that you could do this:

$parent.$parent.$parent.$index

This does not work. The $parent variable only extends to the parent and cannot be chained.

I asked in the Aurelia team chat if anyone had a solution and thankfully core Aurelia developer Ashley Grant chimed in with a great solution that he learned from one of Rob’s intermediate training videos, that I had to share.

Using the ref attribute, you simply create a reference to the repeater and then bind the index to the element itself. The solution is simple, introduces no performance issues (that I am aware of) and works great.

<div repeat.for="section of sections" ref="$root" index.bind="$index">
    <div repeat.for="row of section.rows">
        <div repeat.for="item of row.items">Root index value ${$root.index}</div>
    </div>
</div>

We first specify the ref attribute and provided it a name, I went with $root because it falls more inline with other repeater variables. Then you want to bind to the index property and pass it in the current iteration index. Finally, any subsequent uses are: $root.index where $root is our element and index is our bound value.

Purchase Aurelia for Real World Applications over at Leanpub now

 

Dwayne

 

One thought on “Get Root $index Value From Within Nested Aurelia Repeaters

Leave a Reply

Your email address will not be published. Required fields are marked *