Привязка атрибутов и свойств

Привязка атрибутов и свойств является ключевым механизмом в Polymer, обеспечивающим реактивность компонентов и упрощение обмена данными между элементами и их шаблонами. Она позволяет автоматически синхронизировать значения свойств JavaScript с DOM-атрибутами и отображением в шаблоне.

Основы привязки

Привязка в Polymer разделяется на одностороннюю и двустороннюю:

  • Односторонняя привязка ([[property]]) передаёт значение свойства в шаблон, но изменения в DOM не отражаются обратно в свойство.
  • Двусторонняя привязка ({{property}}) обеспечивает синхронизацию данных в обе стороны, позволяя элементу и его шаблону одновременно изменять значение.

Пример односторонней привязки:

class MyElement extends Polymer.Element {
  static get is() { return 'my-element'; }
  static get properties() {
    return {
      message: {
        type: String,
        value: 'Привет, Polymer!'
      }
    };
  }
}
<my-element>
  <div>[[message]]</div>
</my-element>

Изменение свойства message в коде автоматически обновит содержимое <div>.

Привязка атрибутов

Привязка атрибутов используется для установки значений атрибутов DOM-элементов на основе свойств компонента. Синтаксис аналогичен привязке свойств:

<img src="[[imageUrl]]" alt="Изображение">

Важно понимать разницу между свойством элемента и его атрибутом. Например, для <input> свойство value и атрибут value ведут себя по-разному: изменение свойства изменяет текущее значение, а изменение атрибута — только начальное.

Двусторонняя привязка

Двусторонняя привязка позволяет поддерживать синхронизацию между свойством компонента и полем ввода или дочерним элементом.

<dom-module id="my-input">
  <template>
    <input value="{{userInput::input}}">
    <p>Вы ввели: [[userInput]]</p>
  </template>
  <script>
    class MyInput extends Polymer.Element {
      static get is() { return 'my-input'; }
      static get properties() {
        return {
          userInput: {
            type: String,
            value: ''
          }
        };
      }
    }
    customElements.define(MyInput.is, MyInput);
  </script>
</dom-module>

Событие input используется для обновления свойства userInput при изменении значения в <input>.

Привязка к вычисляемым свойствам

Polymer поддерживает вычисляемые свойства, позволяя определять зависимые значения на основе других свойств:

static get properties() {
  return {
    firstName: String,
    lastName: String,
    fullName: {
      type: String,
      computed: 'computeFullName(firstName, lastName)'
    }
  };
}

computeFullName(first, last) {
  return `${first} ${last}`;
}

Любое изменение firstName или lastName автоматически обновит fullName.

Привязка к массивам и объектам

Привязка к сложным типам данных, таким как массивы и объекты, требует использования методов Polymer для уведомления об изменениях:

  • this.notifyPath('property.path', value) — оповещает систему об изменении вложенного свойства.
  • this.push('array', value), this.splice('array', start, deleteCount, item1, ...) — методы для модификации массивов с автоматическим обновлением привязок.

Пример работы с массивом:

this.items = ['Элемент 1', 'Элемент 2'];
this.push('items', 'Элемент 3');

Привязка в шаблоне:

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

Каждое изменение массива автоматически отобразится в DOM.

Односторонняя привязка с фильтрацией

Polymer позволяет использовать фильтры для трансформации данных перед отображением:

<p>[[formatDate(birthDate)]]</p>
formatDate(date) {
  return new Date(date).toLocaleDateString();
}

Таким образом, привязка становится не просто передачей значения, но и способом форматирования данных для представления.

Событийная привязка

Для привязки методов к событиям в DOM применяется синтаксис on-event:

<button on-click="handleClick">Нажми меня</button>

Метод handleClick вызывается автоматически при событии click:

handleClick(e) {
  console.log('Кнопка нажата', e);
}

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

  • Односторонняя привязка — для отображения данных без обратного влияния.
  • Двусторонняя привязка — для синхронизации свойств с пользовательским вводом или дочерними компонентами.
  • Вычисляемые свойства — позволяют автоматически пересчитывать значения при изменении зависимостей.
  • Работа с массивами и объектами требует использования специальных методов для уведомления об изменениях.
  • Фильтры и вычисления делают привязку гибкой и позволяют адаптировать данные под нужное представление.
  • Событийная привязка связывает DOM-события с методами компонента, обеспечивая интерактивность.

Привязка атрибутов и свойств в Polymer обеспечивает мощный и гибкий механизм управления состоянием компонентов, снижая необходимость в ручной синхронизации и упрощая построение сложных интерфейсов.

Оглавление