javascript - Aurelia ref 绑定(bind)范围因元素而异？

Question

我对 ref 的范围感到困惑属性/绑定(bind)。我有两个具有相同 ref="activeTable" 的 HTML 表，每个表都有多个行，它们都具有相同的 ref="activeRow"。

查看此 GistRun (下面复制的代码)。

当我单击某行的“编辑”按钮时，将传入对所单击行的引用(无论单击的是表格还是行)。但是当我点击表的添加按钮时，表 B 的引用总是被传入。

为什么 ref 被 activeTable 而不是 activeRow 覆盖？

我目前的解决方案是使用ref="activeTableA" 或ref="activeTableB"，但我仍然想了解发生了什么。

我怀疑它与 repeat 和/或 click.delegate 有关。也许事件监听器被添加到表和行的不同范围？

---

HTML

<template>
  <h4>Table A</h4>
  <!-- Note the table ref -->
  <table id="tableA" ref="activeTable">
    <thead>
    <tr>
      <th>Foo</th>
      <!-- Passing in table ref -->
      <th><button click.delegate="addRow(activeTable)">Add</button></th>
    </tr>
    </thead>

    <tbody>
      <!-- Note the row ref -->
      <tr repeat.for="foo of foos" ref="activeRow">
        <td class="editable-cell">${foo.id}</td>
        <!-- Passing in row ref -->
        <td><button click.delegate="editRow(activeRow)">Edit</button></td>
      </tr>
    </tbody>
  </table>

  <h4>Table B</h4>
  <table id="tableB" ref="activeTable">
    <thead>
    <tr>
      <th>Bar</th>
      <th><button click.delegate="addRow(activeTable)">Add</button></th>
    </tr>
    </thead>

    <tbody>
      <tr repeat.for="bar of bars" ref="activeRow">
        <td class="editable-cell">${bar.id}</td>
        <td><button click.delegate="editRow(activeRow)">Edit</button></td>
      </tr>
    </tbody>
  </table>
</template>

JS

export class App {
  foos = [
    {id: 0},
    {id: 1},
    {id: 2},
    {id: 3},
    {id: 4},
    {id: 5},
    {id: 6},
    {id: 7},
    {id: 8},
    {id: 9},
  ];

  bars = [
    {id: 10},
    {id: 11},
    {id: 12},
    {id: 13},
    {id: 14},
    {id: 15},
    {id: 16},
    {id: 17},
    {id: 18},
    {id: 19},
  ];

  addRow(table) {
    console.log("Adding tow to", table);
  }

  editRow(row) {
    console.log('Editing', row);
  }
}

Answer 1

ref 允许您将元素作为绑定(bind)上下文中的变量进行引用。通常，您的绑定(bind)上下文和您的页面(或自定义元素)的 View 模型是同一个。但是，当您处理诸如 repeat.for 之类的“模板 Controller ”(添加/删除 DOM 元素的行为)时，可以更改绑定(bind)上下文。在 repeat.for 的情况下，绑定(bind)上下文成为重复器此迭代的特定 item。

因此，您要覆盖页面 VM 上的 activeTable 属性，但是 activeRow 属性会附加到 foos 中的每个项目，并且bars 中的每个项目。这实际上是您想要的行为(关于 activeRow)，因为您可以将该行的特定元素传递给页面 VM 上的函数。对于 activeTable，您需要为每个表引用使用不同的名称。