问题

Question

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

背景

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

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

const inner = html`<span style="color: red">some text</span>`;
const example = html`
  <div>
    <p>${inner}</p>
  </div>
`;

创建此DOM

<div>
  <p>
    <span style="color: red">some text</span>
  </p>
</div>

使用lit-html，我可以使用

在标记中绑定事件处理程序。

<element on-click="${e => console.log(e)}" />

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

const items = [1, 2, 3, 4, 5];
const template = html`
 <div>
   ${items.map(item => html`<div>${item}</div>`)}
 </div>
`;

// Result
/* <div>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
   </div> */

前言

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

我可以看到两种方法。

const items = [1, 2, 3, 4, 5];
const template = html`
 <div>
   ${items.map(item => html`
     <div on-click="${() => console.log(item)}">
       ${item}
     </div>
   `)}
 </div>
`;

或类似...

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

const items = [1, 2, 3, 4, 5];
const template = html`
 <div>
   ${items.map(item => html`
     <div
       data-item="${item}"
       on-click="${clickHandler}"
     >
       ${item}
     </div>
   `)}
 </div>
`;

问题

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

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

Answer 1

以上两种方法中哪一种是更好的选择？

这完全取决于您和您的用例。不过，有两点可以纳入您的决策过程：

每次创建项目列表时，闭合方法都会为每个项目创建一个新函数；属性方法使您可以重复使用相同的功能（跨项目和跨列表）。
闭包方法允许使用非字符串项目；属性方法仅适用于字符串。
闭合方法将项目的数据保留在DOM之外；属性方法将项目的数据作为属性值放入DOM中，可以在其中查看（通过Inspect Element）或什至对其进行操作。

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

背景

前言

问题

1 个答案: