Как указать обработчики событий при использовании lit-html?

Question

Основная документация в разделе [Написание шаблонов] в следующем примере для привязки обработчика событий с помощью 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-html API, но вместо lit-extended который, кажется, распространяется вместе с lit-html, Изменение оператора импорта для импорта 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, а также основной документации. Я не уверен, является ли приведенный выше синтаксис предпочтительным или единственным способом связывания событий, но он, по крайней мере, работает.

Мне кажется, это может быть хорошим кандидатом для внесения улучшений в 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, чтобы переместить общий шум создания обработчиков событий в декораторы:

@eventOptions({ capture: false, passive: true })
handleClick(e: Event) { console.log('clicked'); }

render() {
    return html`<button @click=${this.handleClick}>Click Me</button>`
}