Перейти к содержанию

Списки

Вы можете использовать стандартные конструкции JavaScript для создания повторяющихся шаблонов.

Lit также предоставляет директиву repeat для более эффективного построения некоторых видов динамических списков.

Рендеринг массивов

Если выражение в дочерней позиции in возвращает массив или итерируемую переменную, Lit отображает все элементы массива:

В большинстве случаев вы захотите преобразовать элементы массива в более удобную форму.

Повторение шаблонов с помощью map

Для визуализации списков можно использовать map для преобразования списка данных в список шаблонов:

Обратите внимание, что это выражение возвращает массив объектов TemplateResult. Lit отобразит массив или итерабельную таблицу подшаблонов и других значений.

Повторение шаблонов с помощью циклических операторов

Вы также можете создать массив шаблонов и передать его в выражение шаблона.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
render() {
  const itemTemplates = [];
  for (const i of this.items) {
    itemTemplates.push(html`<li>${i}</li>`);
  }

  return html`
    <ul>
      ${itemTemplates}
    </ul>
  `;
}

Директива repeat

В большинстве случаев использование циклов или map является эффективным способом построения повторяющихся шаблонов. Однако если вы хотите переупорядочить большой список или изменить его, добавляя и удаляя отдельные элементы, такой подход может потребовать обновления большого количества узлов DOM.

Здесь может помочь директива repeat.

Директива repeat выполняет эффективное обновление списков на основе заданных пользователем ключей:

1
repeat(items, keyFunction, itemTemplate);

Где:

  • items — массив или итерируемый список.
  • keyFunction — функция, принимающая в качестве аргумента один элемент и возвращающая гарантированно уникальный ключ для этого элемента.
  • itemTemplate — шаблонная функция, которая принимает в качестве аргументов элемент и его текущий индекс, а возвращает TemplateResult.

Например:

Если вы пересортируете массив employees, директива repeat изменит порядок существующих узлов DOM.

Чтобы сравнить это с тем, как Lit по умолчанию работает со списками, рассмотрим пересортировку большого списка имен:

  • Для списка, созданного с помощью map, Lit сохраняет узлы DOM для элементов списка, но переназначает значения.
  • Для списка, созданного с помощью repeat, директива repeat переупорядочивает существующие узлы DOM, так что узлы, представляющие первый элемент списка, перемещаются на последнюю позицию.

Когда использовать map или repeat

Что эффективнее — repeat, зависит от вашего случая использования:

  • Если обновление узлов DOM обходится дороже, чем их перемещение, используйте директиву repeat.

  • Если узлы DOM имеют состояние, которое не контролируется шаблонным выражением, используйте директиву repeat.

    Например, рассмотрим этот список:

    1
2
3
4
5
6
7
    html`${this.users.map(
    (user) => html`
        <div>
            <input type="checkbox" /> ${user.name}
        </div>
    `,
)}`;

    Флажок имеет установленное или снятое состояние, но оно не управляется выражением шаблона.

    Если вы измените порядок списка после того, как пользователь установит один или несколько флажков, Lit обновит имена, связанные с флажками, но не их состояние.

Если ни одна из этих ситуаций не применима, используйте операторы map или циклические операторы.

Комментарии