• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Get Root $index Value From Within Nested Aurelia Repeaters

Aurelia 1 · 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.

[code]

Root index value ${$root.index}

[/code]

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.

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
javad
javad
4 years ago

you can assaign a variable to $ index too:
${var1 = $index}

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • Which Neural DSP Archetype Plugins Should You Buy?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Removing A Character From The Start/End of a String In Javascript
  • How To Convert FormData To JSON Object
  • How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags
  • Wild Natural Deodorant Review
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz