要素としてDOMイベントを使用するにはどうすればよいですか？

Question

ブラウザは、テーブルの体内の表要素以外のものを好きではないとの問題を回避するために、私はこのような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が実行された後のある時点で、ビューモデルが要素を失うように見えるということです。私は、注入された要素をローカル変数に入れて、後でイベントハンドラの1つで使用する場合はundefinedです。

イベントハンドラをデバッグすると、thisは実際にはtr要素ですが、注入された要素の変数は定義されていません。コンストラクタでは、注入された要素をキャッチするときthisはビューモデルです。

私は間違っていますか？これを達成するより良い方法はありますか？

Answer 1

あなたはおそらく、thisのバラバラになるかもしれません。あなたのための問題を修正する必要があります

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

：

はにあなたのコードを変更してみてください。