CODEWITHSUNDEEP
aurelia
Chris Roth
Chris Roth

Reputation: 59

Is it possible to access Aurelia repeat.for loop variable within the same tag itself

I would like to access the loop variable of a repeat.for within the tag itself that the repeat.for is declared in.

I'm attempting to convert a Durandal navbar to an Aurelia navbar. The issue I'm having is that the css for the navbar uses an isActive attribute on the li tag. This works well when using Durandal. 

<ul data-bind="foreach: router.routes">
    <li data-bind="css: {isActive: isActive}">
    </li>
</ul>

However when using Aurelia, the loop variable (row) is not yet in scope since the repeat.for is on the li tag as well. I would like to be able to do this:

<ul>
    <li repeat.for="row of router.navigation" css="isActive: ${row.isActive}">
    </li>
</ul>

Is there a way of accomplishing something like this?

Thanks

Upvotes: 1

Views: 542

Answers (1)

Metro Smurf
Metro Smurf

Reputation: 38385

The row is in scope within the li element. Set the value of the css class by evaluating the value of row.isActive:

<ul>
  <li repeat.for="row of router.navigation" 
      class="${row.isActive ? 'active' : ''}">${row.title}</li>
</ul>

Upvotes: 4

Related Questions