DOM 이벤트를 as-element와 함께 어떻게 사용할 수 있습니까? 브라우저가 테이블의 본문에 표 요소 아무것도하지만, 좋아하지 않는 문제를 해결하려면 위해

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이 실행 된 후 어느 시점에서 뷰 모델이 요소를 잃는 것으로 보입니다. 비록 내가 주입 된 요소를 가져 와서 그것을 지역 변수에 넣었습니다. 나중에 이벤트 핸들러 중 하나에서 사용할 때, undefined입니다.

이벤트 처리기를 디버깅 할 경우 this은 실제로 tr 요소이지만 주입 된 요소 변수는 정의되지 않은 것으로 나타났습니다. 생성자에서 주입 된 요소를 잡을 때 this은 뷰 모델입니다.

내가 뭘 잘못하고 있니? 이것을 성취 할 수있는 더 좋은 방법이 있습니까?

Answer 1

자바 스크립트로 this의 바램이 생길 수 있습니다. 당신을 위해 문제를 해결해야

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

:

은 당신의 코드를 변경해보십시오.