Question

提供了[Writing Templates]下的主要文档，下面的示例将事件处理程序与command "python SDFlexnimblevolcreate.py #{var1} #{node['ilorest']['Test0']} #{var2} #{node['ilorest']['Test1']} cwd "#{platformdirectory}" live_stream true绑定。

lit-html

添加一个简单的页面并导入默认的html`<button @click=${(e) => console.log('clicked')}>Click Me</button>`和render函数，然后调用render似乎并不能渲染按钮。如果删除html事件绑定，则呈现按钮。库中肯定有我缺少的东西或严重的错误。

版本：0.10.2

以下链接与事件处理程序绑定在@click中的工作方式有关：

Answer 1

当前接受的答案是错误的。 min()已过时，此解决方法仅在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和TypeScript增强功能的Web组件的基础，以将创建事件处理程序的样板噪声转移到装饰器中：

lit-element

Answer 2

看来，要使用事件处理程序绑定，一定不能使用标准的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文档进行改进的不错选择。

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

2 个答案: