Question

有没有办法监听#selectDate元素的onclick事件，点击后，item变量也会传递给onclick函数？我使用es6模板生成HTML代码。我尝试使用${}，但实际上它会将内部的任何内容转换为字符串，这不是我想要的。

我还检查了类似＆lt; %%＆gt;的内容，但不知何故没有按预期工作..

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元素或其子元素之一上发生的点击事件。在这种情况下，将调用自定义onclick回调，item对象将传递给该回调。

renderDate的调用接受了item对象，但也接受了上面提到的回调。我不清楚你是否希望在类中定义回调，或者由调用者提供回调，所以我选择了第二种可能性。要更改代码以使用第一个模式应该不难。

如何在ES6模板字符串中绑定事件？

1 个答案: