動的に追加された要素からAurelia removeEventListener

Question

aureliaテンプレートの動的に追加された要素にeventlistenerを追加しました。 ページを取り外すときに、要素からリスナーを削除する必要があります。 リスナーを削除するには、その要素を参照する方法が必要です。

HTMLのrefキーワードを認識しています。これは、VMへの要素を参照するためのものです。多分これを解決する方法です。要素に動的に追加しようとしましたが、ソースビューでそれを見ることができませんでした。

以下を参照してください。

// this is the dynamically created element: 
var cancelDiv = createDiv("cancel"); 
cancelDiv.addEventListener('click', this.DoSomething.bind(this)); 

// Trying to add attribute: 
<element>.attributes["ref"] = <refValue>; 
//or 
<element>['ref'] = <refValue>; 

を**要素がテンプレートの一部であり、

Answer 1

ページに複数回表示される場合がありますので、DOMはオプションではありません照会することによって要素に到達これは間違ったアプローチです。個々の要素にイベントを添付しないでください。代わりにevent delegationを使用してください。前提は簡単ですが、多くのイベントの代わりに、1つのイベントリスナーを親要素にアタッチし、子のすべてのイベントを取得します。

マークアップがこれであり、クラスがitemのDIVのそれぞれが動的に追加/削除されるとします。

<template> 
    <div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
    </div> 
</template> 

あなたのアプローチは、あなたに多くの痛みを引き起こすことが起こっているDIVのこれらの子のそれぞれにイベントを入れています。その後

<template> 
    <div click.delegate="itemClicked($event)"> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
    </div> 
</template> 

あなたaccompyingビューモデルの内側に、あなたが渡されたイベントを上記の方法を作成してもらう：

あなたがやるべきアプローチは、結合アウレリアのデリゲートを使用して、以下である

export class MyClass { 
    itemClicked(e) { 
     console.log(e.target); // e.target is the target element, so any of the clicked children 
    } 
} 

delegateの上側は、単独で処理することなくイベントリスナーを切り離すことです。