Синтаксис шаблонов Polymer

Polymer — это библиотека для создания веб-компонентов на JavaScript, которая использует декларативный синтаксис шаблонов для связывания данных, управления состоянием и динамического рендеринга элементов. Шаблоны в Polymer обеспечивают структурированное и эффективное создание интерфейсов, позволяя инкапсулировать логику и представление внутри компонентов.

Шаблоны и <template>

В основе синтаксиса лежит HTML-тег <template>, который позволяет хранить структуру элементов, не добавляя её напрямую в DOM до тех пор, пока это не потребуется. В Polymer шаблон автоматически «разворачивается» и связывается с данными компонента.

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
      }
      .highlight {
        color: red;
      }
    </style>
    <div class="highlight">[[message]]</div>
  </template>
  <script>
    class MyElement extends Polymer.Element {
      static get is() { return 'my-element'; }
      static get properties() {
        return {
          message: {
            type: String,
            value: 'Привет, Polymer!'
          }
        };
      }
    }
    customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

В этом примере используется двустороннее связывание данных через [[message]], что позволяет автоматически обновлять содержимое при изменении значения свойства message.

Одно- и двустороннее связывание данных

Polymer поддерживает два типа связывания:

  • Одностороннее: [[property]]. Значение свойства отображается в DOM, но изменение DOM не влияет на свойство.
  • Двустороннее: {{property}}. Любое изменение DOM автоматически обновляет свойство компонента и наоборот.
<input value="{{username::input}}">
<p>Привет, [[username]]!</p>

В этом примере username синхронизируется с полем ввода в реальном времени. Декларация ::input указывает событие, по которому происходит обновление свойства.

Шаблоны условного отображения: dom-if

Для условного рендеринга элементов используется <template is="dom-if" if="[[condition]]">. Элемент внутри шаблона добавляется или удаляется из DOM в зависимости от значения condition.

<template is="dom-if" if="[[isVisible]]">
  <p>Этот блок видим только если isVisible = true</p>
</template>

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

  • if принимает булевое выражение или свойство.
  • Внутренние элементы полностью удаляются из DOM при false, что экономит ресурсы.
  • Можно использовать атрибут restamp для повторной генерации DOM при каждом переключении условия.

Циклы и списки: dom-repeat

Для генерации элементов на основе массивов используется <template is="dom-repeat" items="[[array]]">. Каждая итерация шаблона создаёт отдельный экземпляр элемента, доступный через переменную item.

<template is="dom-repeat" items="[[fruits]]" as="fruit">
  <div>[[fruit.name]] - [[fruit.color]]</div>
</template>

Особенности dom-repeat:

  • Поддержка фильтров и сортировки через функции filter и sort.
  • Атрибут indexAs позволяет задавать имя переменной для индекса элемента.
  • Динамическое обновление DOM при изменении массива с помощью методов push, splice и других, встроенных в Polymer.

Встраивание стилей и Shadow DOM

Polymer активно использует Shadow DOM, что позволяет инкапсулировать стили компонента. Все стили, определённые в <style> внутри <template>, применяются только к содержимому компонента. Взаимодействие с внешним стилем возможно через ::slotted и CSS custom properties.

<style>
  :host {
    display: block;
    background-color: var(--my-element-bg, #f0f0f0);
  }
  ::slotted(span) {
    font-weight: bold;
  }
</style>
<slot></slot>

Использование slot позволяет передавать внешний контент внутрь компонента, при этом сохраняя локальную стилизацию.

Обработчики событий в шаблоне

Polymer поддерживает привязку обработчиков событий через атрибут on-event="handler". Имя события указывается после on-, а значение — функция, определённая в компоненте.

<button on-click="handleClick">Нажми меня</button>
handleClick(e) {
  console.log('Кнопка нажата', e);
}

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

  • Событие передаётся в функцию как объект Event.
  • Можно использовать модификаторы событий, например on-click="handleClick" реагирует на стандартное событие click.
  • Связь с DOM-событиями полностью декларативная, без необходимости вручную добавлять слушатели через addEventListener.

Динамическая вставка HTML

Для вставки динамического HTML можно использовать свойство innerHTML, но Polymer рекомендует привязывать только безопасный контент и избегать прямого включения пользовательских данных во избежание XSS-уязвимостей. Для сложных случаев используется <dom-repeat> или создание подкомпонентов.

Синтаксис шаблонов Polymer сочетает декларативность HTML с мощными возможностями связывания данных и управления DOM. Использование <template>, dom-if и dom-repeat позволяет создавать гибкие, динамичные интерфейсы, полностью изолированные в рамках компонента, с лёгкой интеграцией событий, стилей и слотов для вложенного контента.

Оглавление