HTML DOM Templating: данные- * против замыканий для привязки данных

Question

Я столкнулся с двумя методами обработки событий при шаблонировании HTML, и у меня нет интуиции, чтобы определить, что лучше.

Фон

Я использую lit-html , но та же проблема относится к другим методам шаблонирования DOM в JS - думаю, vue, angular, реагировать.

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> */

Предисловие

Теперь скажите, что я хочу привязать обработчики событий к элементам, которые сделаны в "цикле" карты.

Iможно увидеть два способа сделать это.

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) или даже манипулировать.