lit-html - 使用 lit-html 时如何指定事件处理程序？

Question

[Writing Templates] 下的主要文档提供了以下用于将事件处理程序与 lit-html 绑定(bind)的示例。

html`<button @click=${(e) => console.log('clicked')}>Click Me</button>`

将此添加为一个简单的页面，并导入默认的 render 和 html 函数并调用 render，但似乎不会渲染该按钮。如果删除 @click 事件绑定(bind)，则会呈现该按钮。库中一定有我遗漏的东西或严重的错误。

版本:0.10.2

下面的链接涉及事件处理程序绑定(bind)如何在 lit-html 中工作:

• https://polymer.github.io/lit-html/guide/writing-templates.html
• https://github.com/Polymer/lit-html/issues/399
• https://github.com/Polymer/lit-html/issues/145
• https://github.com/Polymer/lit-html/issues/273
• https://github.com/Polymer/lit-html/issues/146

Answer 1

之前接受的答案是错误的。 lit-extend 已弃用，该解决方法仅在 2018 年 lit-html 切换到新语法期间有效。

消费事件的正确方法是:

html`<button @click=${e => console.log('clicked')}>Click Me</button>`

您也可以通过使用 handleEvent 方法分配对象来配置事件:

const clickHandler = {

    // This fires when the handler is called
    handleEvent(e) { console.log('clicked'); }

    // You can specify event options same as addEventListener
    capture: false;
    passive: true;
}

html`<button @click=${clickHandler}>Click Me</button>`

还有 lit-element ，它为您构建具有 Lit 和 TypeScript 增强功能的 Web 组件提供了基础，从而将创建事件处理程序的样板噪音移至装饰器中:

@eventOptions({ capture: false, passive: true })
handleClick(e: Event) { console.log('clicked'); }

render() {
    return html`<button @click=${this.handleClick}>Click Me</button>`
}