Списки

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

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

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

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

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

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

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

render() {
  const itemTemplates = [];
  for (const i of this.items) {
    itemTemplates.push(html`<li>${i}</li>`);
  }

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

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

В этом случае может помочь директива repeat.

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

repeat(items, keyFunction, itemTemplate)

Здесь:

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

Например:

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

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

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

Выбор более эффективного способа повтора зависит от конкретного случая:

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

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

  Рассмотрим, например, следующий список:

  html`${this.users.map((user) =>
    html`
      <div><input type="checkbox"> ${user.name}</div>
    `)
  }`

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

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

Если ни одно из этих условий не выполняется, используйте map или циклы.

Изменить эту страницу