lit-html - 使用 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：

score 8 · Accepted Answer

之前接受的答案是错误的。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>`
}

score -2 · Accepted Answer

看来，为了使用事件处理程序绑定，不能使用标准lit-htmlAPI，而是lit-extended似乎与lit-html. 如下所示将 import 语句更改为 importlit-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>`

请注意，@click无论 GitHub 问题和主文档中显示的几个示例如何，语法似乎对我都不起作用。我不确定上述语法是进行事件绑定的首选方式还是唯一方式，但它似乎至少是一种有效的方式。

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

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

2 回答 2

Related

Reference