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

Question

[编写模板] 下的主要文档提供了以下用于将事件处理程序与 lit-html 绑定的示例。

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

添加此简单页面并导入默认 render 和 html 函数并调用 render 但是似乎无法呈现按钮。如果删除 @click 事件绑定，则会呈现该按钮。一定是我遗漏了什么或者库中存在严重错误。

版本：0.10.2

以下链接涉及事件处理程序绑定在 lit-html 中的工作方式：

Answer 1

似乎为了使用事件处理程序绑定不能使用标准 lit-html API 而是 lit-extended 似乎与 lit-html 一起分发.将 import 语句更改为 import lit-extended 并如下所示更改属性语法似乎对我有用。

之前：

import { html, render } from "lit-html";

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

（工作后）：

import { html, render } from "lit-html/lib/lit-extended";

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

请注意，无论 GitHub 问题以及主要文档中显示的几个示例如何，@click 语法对我来说似乎根本不起作用。我不确定上面的语法是首选方法还是唯一的事件绑定方法，但它似乎至少是一种有效的方法。

在我看来，这可能是为 lit-html 文档做出改进的一个很好的候选者。

Answer 2

之前接受的答案是错误的。 lit-extended 已弃用，该解决方法仅在 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>`
}

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

How to specify event handlers when using lit-html?

lit-html