Use ${$index} from Aurelia for loop in another part of a template

Question

Is there anyway that I can replicate an index from a repeat.for loop in Aurelia outside of that loop. I am using the index to create a class inside of my for loop and need another element to have that same class, but this other element is not in the loop. Is there a way to do this? For loop:

<div repeat.for="conversation of conversations">
   <div if.bind="!conversation.participantPhotoUrl" class="user-initials color-${$index}"><span>J</span></div>
   <p class="view-date"><a click.delegate="makeActive(conversation)">View</a><span class="date">${conversation.daysAgo}</span></p>
</div>

I now need another element in the template (not in the loop) to have that same class. This element is generated from the

click.delegate="makeActive(conversation)"

inside of the for loop above. Is there a way to pass that class over?

Answer 1

You could pass the $index to the function.

 click.delegate="makeActive(conversation, $index)

Then, in the function set that as a property on your main VM.

 makeActive(conversation, index) {
   this.activeIndex = index;
 }