代码之家 › 专栏 › 技术社区 › jpierson

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

lit-html

1

jpierson · 技术社区 · 6 年前

[编写模板]下的主要文档下面的示例用于将事件处理程序与 lit-html

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

用默认值添加一个简单的页面 render 和 html 但是,导入并调用render的函数似乎没有呈现按钮。如果您删除 @click 事件绑定然后呈现按钮。一定是我丢了什么东西或者图书馆里有个严重的错误。

下面的链接与事件处理程序绑定在中的工作方式有关 链接html

2 回复 | 直到 6 年前

1

3

Keith 6 年前

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

2

-1

jpierson 6 年前

似乎为了使用事件处理程序绑定,不能使用标准 lit-html API但是 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>`

请注意 @click 不管GitHub问题和主要文档中显示了哪些示例,语法对我来说似乎根本不起作用。我不确定上述语法是否是进行事件绑定的首选方法或唯一方法,但它似乎至少可以工作。

对我来说,这可能是一个很好的改进方案文档。