Динамическое создание шаблонов

Polymer предоставляет мощные инструменты для работы с веб-компонентами, включая динамическое создание и управление шаблонами. Шаблоны позволяют отделять структуру DOM от логики приложения, обеспечивая повторное использование кода и реактивность.

Основы <template> и dom-repeat

В основе динамических шаблонов лежит элемент <template>. В Polymer он используется совместно с директивами вроде dom-repeat и dom-if, обеспечивая создание DOM-элементов на основе данных.

Пример:

<dom-module id="user-list">
  <template>
    <template is="dom-repeat" items="{{users}}">
      <div>Имя: [[item.name]], Возраст: [[item.age]]</div>
    </template>
  </template>
  <script>
    class UserList extends Polymer.Element {
      static get is() { return 'user-list'; }
      static get properties() {
        return {
          users: {
            type: Array,
            value: () => [
              {name: 'Анна', age: 25},
              {name: 'Иван', age: 30}
            ]
          }
        };
      }
    }
    customElements.define(UserList.is, UserList);
  </script>
</dom-module>

Ключевые моменты:

  • dom-repeat автоматически создает экземпляры шаблона для каждого элемента массива users.
  • Связь данных осуществляется через двойные квадратные скобки [[item.property]].
  • Реактивность позволяет автоматически обновлять DOM при изменении массива.

Условное отображение с dom-if

Для динамического создания элементов на основе условий используется dom-if. Этот шаблон позволяет рендерить DOM только при соблюдении определённого условия.

Пример:

<template is="dom-if" if="[[showDetails]]">
  <div>Подробная информация доступна</div>
</template>

Особенности:

  • Атрибут if связывается с булевой переменной.
  • Элемент создаётся и вставляется в DOM только при значении true.
  • Использование restamp позволяет полностью удалять и пересоздавать шаблон при изменении условия.
<template is="dom-if" if="[[showDetails]]" restamp>
  <div>Динамически пересоздаваемый блок</div>
</template>

Программное создание шаблонов

Помимо декларативного способа, Polymer позволяет создавать шаблоны программно через JavaScript. Метод Polymer.DomModule и API document.importNode обеспечивают клонирование и вставку шаблонов в DOM.

Пример:

const template = document.createElement('template');
template.innerHTML = `<div>Программно созданный элемент</div>`;

const clone = document.importNode(template.content, true);
this.shadowRoot.appendChild(clone);

Особенности:

  • importNode(template.content, true) клонирует содержимое шаблона с глубоким копированием.
  • Позволяет создавать элементы динамически, например, на основе данных, загруженных с сервера.
  • Используется совместно с Shadow DOM для инкапсуляции стилей и структуры.

Повторное использование шаблонов с <dom-bind>

Для динамического рендеринга вне компонентов можно применять <dom-bind>. Этот подход полезен для небольших страниц или тестов без создания кастомных элементов.

<template is="dom-bind" id="app">
  <template is="dom-repeat" items="[[items]]">
    <div>[[item]]</div>
  </template>
</template>

<script>
  const app = document.querySelector('#app');
  app.items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
</script>

Примечания:

  • <dom-bind> обеспечивает двустороннюю привязку данных и реактивное обновление.
  • Позволяет применять шаблоны без необходимости определять отдельный кастомный элемент.

Оптимизация динамических шаблонов

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

  1. Использование mutableData Позволяет Polymer отслеживать изменения свойств объектов и массивов без полной замены.

    <template is="dom-repeat" items="{{users}}" mutable-data>

  2. Фильтрация и сортировка через вычисляемые свойства Применяются методы для сортировки или фильтрации элементов перед отображением, что снижает нагрузку на DOM.

  3. Ленивая инициализация с dom-if и restamp Создание элементов только при необходимости позволяет экономить ресурсы.

Интеграция с внешними данными

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

Пример загрузки пользователей с сервера:

this.users = [];
fetch('/api/users')
  .then(response => response.json())
  .then(data => { this.users = data; });
  • После обновления свойства users dom-repeat автоматически создаёт новые DOM-элементы.
  • Можно комбинировать с dom-if, чтобы показывать индикатор загрузки.

Динамическое создание шаблонов в Polymer обеспечивает гибкую и масштабируемую работу с DOM, сочетая декларативный подход через <template> и программное управление через JavaScript. Правильное использование dom-repeat, dom-if, <dom-bind> и методов клонирования шаблонов позволяет создавать сложные, отзывчивые интерфейсы с минимальной нагрузкой на браузер.

Оглавление