Aurelia. Why is my nested repeat.for select not displaying data?

Question

I have the below simple table displaying users and their roles. My nested repeat.for loops through a list of roles. My repeat.for="role of rolesData" does not display my data. Can you tell me why not? It only works if I add the 3rd repeat.for inside the div tag.

    <tbody>
     <tr repeat.for="user of usersData">
     <td>${user.name}</td>
     <td>
      <select>
       <option repeat.for="role of rolesData">${role.name}</option>
      </select>
     </td>
    </tr>
      <div repeat.for="role of rolesData">
   <tbody>

score 2 · Accepted Answer · answered Sep 19 '18 at 18:59

it's difficult to answer without seeing you js/ts but I'm pretty sure what causing your problem.

I'm guessing you have a rolesData property in your VM that is being populated in an AJAX call. this means that when the page first loads, rolesData is still not defined. and then, in the then of the ajax call, you probably do this.rolesData = data or something similar. note that even if you declare a property called rolesData in your class, it will have no affect until you are actually assign something to it (even assigning undefined is good).

in aurelia - when you bind to an un-existing property, aurelia will create it for you and bind to it. therefor you never have exceptions or something similar.

in your case, you are binding to an un-existing property inside a repeat loop. in the repeat, each repetition create a local scope for the current variable, binding to an un-existing property inside of a child scope create a new property in the child scope. therefor, even when in a later time - you actually populate rolesData with stuff, its being populated in the parent scope - but each child is bounded to a different collection (each child have it's own scope).

when you have the external div bounded to the same variable, you have a little side-effect that is causing the whole thing to work. because the external div creates a variable in the parent scope, and now each child - instead of creating a local variable in their respected scopes - they will use the same variable that already exists in the parent scope. and then - later when you populate the same variable - the binding keeks in and every thing look nice.

TL;DR: in your VM, declare rolesData = undefined; instead of just declaring it.

Aurelia. Why is my nested repeat.for select not displaying data?

1 Answers1