0

为了解决浏览器不喜欢表格正文中的表格元素的问题，我使用了一个自定义元素，tr如下所示：

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

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

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

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

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

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

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

4

1 回答 1

2

您可能会被thisJavascript 的变幻莫测所困扰。

尝试将您的代码更改为：

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

那应该可以为您解决问题。

于 2017-01-30T19:36:33.923 回答