ES6テンプレート文字列でイベントをバインドする方法は？

Question

#selectDate要素のonclickイベントをリッスンする方法はありますか？クリックしている間に、item変数もonclick関数に渡されますか？私はes6テンプレートを使ってHTMLコードを生成しています。私は${}で試しましたが、実際には内部の文字列を文字列に変換します。これは私が望むものではありません。

私も> <%％のようなものを確認したが、期待通りに何とか動作しません...ここで

renderDate(item) { 
     let self = this; 
     if (!item) { 
      return ""; 
     } 
     let checked =item.selected?"checked":""; 

     tmp = `<div class="day-item align-center" id="selectDate" key="${item.name}" onclick=""> 
       <div class="checkbox align-center justify-center ${checked}" ${checked}> 
        <span class="iconfont icon-check"></span> 
       </div> 
       <span class="text">${item.name}</span> 
      </div>` 
     return tmp 
    } 

Answer 1

はそれを行うための一つの方法である：

class myClass { 
 
    constructor() { 
 
    this.onclick = null; 
 
    this.item = null; 
 
    // Add delegated click listener 
 
    document.addEventListener('click', function (e) { 
 
     // Only if click happens in #selectDate, and a click handler was defined: 
 
     if (this.onclick && e.target.closest('#selectDate')) { 
 
     this.onclick(e, this.item); 
 
     } 
 
    }.bind(this)); // `this` refers to this myClass object when clickListener is called 
 
    } 
 

 
    renderDate(item, onclick) { 
 
    if (!item) { 
 
     return ""; 
 
    } 
 
    this.item = item; 
 
    this.onclick = onclick; 
 
    let checked = item.selected ? "checked" : ""; 
 
    
 
    let tmp = `<div class="day-item align-center" id="selectDate" key="${item.name}" > 
 
       <div class="checkbox align-center justify-center ${checked}" ${checked}> 
 
       <span class="iconfont icon-check"></span> 
 
       </div> 
 
       <span class="text">${item.name}</span> 
 
      </div>`; 
 
    return tmp; 
 
    } 
 
} 
 
    
 
let item = { 
 
     selected: true, 
 
     name: 'this is my text: click me', 
 
     data: [1, 2, 3, 4] // some other data... 
 
    }, 
 
    myObj = new myClass; 
 

 
function processItem(e, storedItem) { 
 
    console.log(
 
`You clicked element with key = "${e.target.closest('#selectDate').getAttribute('key')}". 
 
Item = ${JSON.stringify(storedItem)}` 
 
    ); 
 
} 
 

 
// get the template, provide the onclick handler, and insert the HTML 
 
document.getElementById('container').innerHTML = myObj.renderDate(item, processItem);

<h1>My title</h1> 
 
<div id="container"></div>

クラスのインスタンスが作成されると、リスナーがドキュメントに追加されます。これは、selectDate要素またはその子要素の1つで発生したクリックイベントをフィルタリングします。この場合、カスタムonclickコールバックが呼び出され、itemオブジェクトが渡されます。

renderDateの呼び出しは、アイテムオブジェクトを取りますが、上記のコールバックも取ります。コールバックがクラス内で定義されているか、呼び出し側によって提供されているかどうかはわかりませんでしたので、私はその2番目の可能性を探しました。最初のパターンを使用するようにコードを変更するのは難しくありません。