polymer - 无法理解 Lit-Element 文档中的事件处理程序示例

Question

在Lit-Element 自述文件中，为什么事件处理程序示例需要变量替换：

event handler: html`<button on-click="${(e) => this._clickHandler(e)}"></button>`

即-我不明白表达式的哪一部分需要“替换”-为什么不能对事件处理程序进行硬编码，而无需将其包装在动态替换中？

Answer 1

实验表明，如果没有模板文字，该值将被解释为内容属性的值，该值只能是字符串。

因此，以下 [不正确] HTML：

<button id="x" on-click="(e) => console.log(e)"> <!-- DON'T DO THIS -->

相当于将字符串分配给on-click属性而不是设置click-event 处理程序：

document.getElementById('id').setAttribute('on-click', '(e) => console.log(e)');

您可以在此演示getEventListeners()中通过在按钮上运行来确认此行为。