Как использовать события DOM с помощью as-element?

Question

Для того, чтобы обойти проблемы с браузерами ничего, кроме элементов таблицы не нравится в теле таблицы, я использую пользовательский элемент для 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, это модель представления.

Что я делаю неправильно? Есть ли лучший способ достичь этого?

Answer 1

Вы, вероятно, получаете немного от капризов this в Javascript.

Попробуйте изменить свой код:

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

Это должно исправить эту проблему для вас.