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

Question

在 Lit-Element readme ，为什么事件处理程序示例需要变量替换:

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

即 - 我不明白表达式的哪一部分需要“替换” - 为什么不能将事件处理程序硬编码，而不用动态替换？

Answer 1

实验表明，没有template literals ，该值被解释为 content attribute 的值, 只能是字符串。

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

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

相当于将一个字符串分配给一个 on-click属性而不是设置 click - 事件处理程序:

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

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