HTML

Question

我对ref属性/绑定的范围感到困惑。我有两个具有相同# Calculate EMAs for each stock for (i in paste0(ticker.list, ".Close")) { ema3 <- EMA(closeData[, i], 3) ema7 <- EMA(closeData[, i], 7) }的HTML表，每个表都有多行，所有行都具有相同的ref="activeTable"。

请参阅此GistRun（下面复制的代码）。

当我单击行的“编辑”按钮时，将传入对单击行的引用（无论是否单击表或行）。但是，当我点击表格的“添加”按钮时，表B 始终的引用将被传入。

为什么ref="activeRow"会覆盖ref而不是activeTable？

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

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

HTML

click.delegate

JS

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

Answer 1

ref允许您在绑定上下文中将元素引用为变量。通常，您的绑定上下文和您的页面（或自定义元素的）视图模型是同一个。但是当你正在处理一个＆＃34;模板控制器＆＃34; （添加/删除DOM元素的行为），例如repeat.for，可以更改绑定上下文。在repeat.for的情况下，绑定上下文成为转发器此迭代的特定项。

因此，您要覆盖网页虚拟机上的activeTable媒体资源，activeRow媒体资源会附加到foos中的每个项目以及每个项目中bars。这实际上是您想要的行为（关于activeRow），因为您可以将该行的特定元素传递给页面VM上的函数。对于activeTable，您需要为每个表格使用不同的名称。

Aurelia ref绑定范围根据元素不同？

HTML

JS

1 个答案: