DOM 事件如何与 as-element 一起使用？

Question

为了解决浏览器只喜欢 table 主体中的 table 元素的问题，我正在为 tr 使用自定义元素，如下所示：

  <tr as-element="session-row" repeat.for="session of sessions" session.bind="session"></tr>

但是，这会导致任何 DOM 事件处理程序（例如我放在 tr 上的 mouseenter.trigger 找不到自定义元素视图模型中的处理程序。

因此，我尝试注入元素并在自定义元素本身中添加侦听器：

attached() {
    this.element.addEventListener('pointerenter', this.doPointerEnter);
    this.element.addEventListener('pointerleave', this.doPointerLeave);
}

在这种情况下，事件触发得很好，并且它们命中了处理程序。问题在于，在 attached 运行后的某个时刻，视图模型似乎丢失了元素。尽管我将注入的元素放入局部变量中，但当我稍后想在其中一个事件处理程序中使用它时，它是 undefined.

我注意到，如果我调试事件处理程序，this 实际上是 tr 元素，但我注入的元素变量是未定义的。在构造函数中，当我捕获注入的元素时，this 是视图模型。

我做错了什么？有没有更好的方法来实现这一目标？

Answer 1

您可能会被 Javascript 中 this 的变化无常所困扰。

尝试将您的代码更改为：

attached() {
    this.element.addEventListener('pointerenter', evt => this.doPointerEnter(evt));
    this.element.addEventListener('pointerleave', evt => this.doPointerLeave(evt));
}

这应该可以解决您的问题。

DOM 事件如何与 as-element 一起使用？

How can DOM events be used with as-element?

aurelia

aurelia-templating