html模板中绑定数据,HTML DOM模板：data- *与用于绑定数据的闭包

在模板化HTML时，我遇到了两种处理事件的方法，并且我没有直觉来确定哪种方法更好。

背景

我正在使用lit-html，但是同样的问题也适用于在JS中对DOM进行模板化的其他方法-思考，角度，反应。

Lit-html使用标记的模板文字字符串，允许使用这种语法

const inner = html`some text`;

const example = html`

${inner}

`;

创建此DOM

some text

使用lit-html，我可以使用在标记中绑定事件处理程序。

我还可以遍历可迭代对象以构建一堆DOM：

const items = [1, 2, 3, 4, 5];

const template = html`

${items.map(item => html`

${item}

`)}

`;

// Result

/*

1

2

3

4

5

*/

前言

现在说我想将事件处理程序绑定到映射“循环”中创建的元素。

我可以看到两种方法。

const items = [1, 2, 3, 4, 5];

const template = html`

${items.map(item => html`

${item}

`)}

`;

或类似...

const clickHandler = (e) => console.log(e.toElement.dataset['item']);

const items = [1, 2, 3, 4, 5];

const template = html`

${items.map(item => html`

data-item="${item}"

on-click="${clickHandler}"

>

${item}

`)}

`;

问题

以上两种方法中哪一种是更好的选择？出于任何原因进行回答-例如安全/数据丢失或性能不同等方面的相关风险。

我倾向于做第一种风格。之所以称其为闭包绑定，是因为我为每个元素都创建了新的匿名函数。