奥雷莉亚。为什么我的嵌套 repeat.for select 不显示数据？

Question

我有以下简单的 table 显示用户和他们的角色。我的嵌套 repeat.for 循环遍历角色列表。我的 repeat.for="role of rolesData" 不显示我的数据。你能告诉我为什么不吗？仅当我在 div 标签内添加第 3 个 repeat.for 时才有效。

    <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>

Answer 1

没有见到你很难回答js/ts但我很确定是什么导致了你的问题。

我猜你的 VM 中有一个 rolesData 属性正在 AJAX 调用中填充。这意味着当页面首次加载时，rolesData 仍未定义。然后，在 ajax 调用的 then 中，您可能会执行 this.rolesData = data 或类似的操作。请注意，即使您在 class 中声明了一个名为 rolesData 的属性，它也不会产生任何影响，直到您实际为它分配一些东西（即使分配 undefined 也是好的） .

在 aurelia 中 - 当您绑定到 un-existing 属性时，aurelia 会为您创建并绑定到它。因此你永远不会有例外或类似的事情。

在您的情况下，您绑定到 repeat 循环内的 un-existing 属性。在重复中，每次重复都会为当前变量创建一个局部范围，绑定到 child 范围内的 un-existing 属性在 child 范围内创建一个新的属性。因此，即使在稍后的时间 - 你实际上用东西填充 rolesData，它被填充在 parent 范围内 - 但每个 child 都绑定到不同的集合（每个 child 有自己的作用域）。

当你将外部 div 绑定到同一个变量时，你有一点 side-effect 导致整个事情起作用。因为外部 div 在 parent 作用域中创建了一个变量，现在每个 child - 而不是在其受尊重的作用域中创建局部变量 - 他们将使用已经存在于parent 范围。然后 - 稍后当您填充相同的变量时 - 绑定会出现并且一切看起来都不错。

长话短说：在您的 VM 中，声明 rolesData = undefined；而不是仅仅声明它。

奥雷莉亚。为什么我的嵌套 repeat.for select 不显示数据？

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

nested

aurelia