Списки

Для создания повторяющихся шаблонов можно использовать стандартные конструкции 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 или циклы.

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