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

Question

[Writing Templates] 下的主要文档提供了以下用于将事件处理程序与

lit-html

绑定的示例。

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

添加一个简单的页面，并导入默认的

render

和

html

函数并调用渲染，但似乎不会渲染按钮。如果删除

@click

事件绑定，则会呈现该按钮。库中一定有我遗漏的东西或严重的错误。

版本：0.10.2

下面的链接涉及事件处理程序绑定如何在

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-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>`
}

Answer 2

更新：看来我在下面给出的答案虽然在几年前的短时间内有效，但对于现代版本的 lit 来说不再是正确的答案。请参阅Keith 的回答，它更有可能引导您找到解决方案。

看来，为了使用事件处理程序绑定，不得使用标准

lit-html

API，而应使用

lit-extended

，它似乎与

lit-html

一起分发。将导入语句更改为 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

文档做出贡献的良好候选者。