Система свойств и привязка данных

Свойства компонентов

В Polymer каждый веб-компонент управляется через свойства, которые определяют его состояние и позволяют динамически изменять содержимое элемента. Свойства объявляются в объекте properties внутри класса элемента и могут иметь тип, значение по умолчанию и наблюдатели изменений.

Пример объявления свойств:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MyElement extends PolymerElement {
  static get properties() {
    return {
      name: {
        type: String,
        value: 'Polymer',
        reflectToAttribute: true
      },
      counter: {
        type: Number,
        value: 0,
        observer: '_counterChanged'
      }
    };
  }

  _counterChanged(newValue, oldValue) {
    console.log(`Счетчик изменился с ${oldValue} на ${newValue}`);
  }
}

customElements.define('my-element', MyElement);

Типы свойств

  • String, Number, Boolean, Array, Object — стандартные типы.
  • Function — для передачи функций в качестве свойств.
  • Date — для работы с датами и временем.

Свойства могут быть отражены в атрибуты HTML с помощью reflectToAttribute: true, что обеспечивает синхронизацию состояния между DOM и объектом компонента.

Привязка данных

Привязка данных в Polymer позволяет автоматически синхронизировать свойства компонента с его шаблоном. Основные типы привязки:

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

Пример использования:

static get template() {
  return html`
    <div>Привет, [[name]]!</div>
    <input value="{{name::input}}">
    <button on-click="_increment">Увеличить счетчик</button>
    <p>Счетчик: [[counter]]</p>
  `;
}

_increment() {
  this.counter++;
}

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

Polymer поддерживает наблюдение за изменениями элементов массивов и свойств объектов. Для этого используются специальные методы:

  • this.push('arrayProperty', newItem) — добавление элемента в массив.
  • this.splice('arrayProperty', index, count, ...items) — удаление или замена элементов.
  • this.set('objectProperty.key', value) — установка значения вложенного свойства объекта.
  • this.notifyPath('objectProperty.key') — уведомление о ручных изменениях пути объекта.

Пример:

this.push('items', { id: 1, name: 'Item 1' });
this.set('user.name', 'Alex');
this.notifyPath('user.age');

Обсерверы и вычисляемые свойства

Обсерверы (observer) позволяют реагировать на изменения конкретных свойств:

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

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

Динамическое обновление интерфейса

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

  • Изменение свойства через код автоматически обновляет шаблон.
  • Двусторонняя привязка позволяет вводить данные через элементы формы и сразу обновлять состояние компонента.
  • Методы для массивов и объектов поддерживают granular updates, что повышает производительность и предотвращает повторный рендер всего компонента.

Резюме ключевых механизмов

  • Свойства: определяют состояние компонента, могут иметь тип, значение по умолчанию, отражение в атрибуты, наблюдатели.
  • Привязка данных: односторонняя [[ ]] и двусторонняя {{ }} синхронизация между свойствами и DOM.
  • Обсерверы и вычисляемые свойства: позволяют создавать зависимости между свойствами и автоматически обновлять значения.
  • Работа с массивами и объектами: специализированные методы для реактивного обновления сложных структур данных.

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

Оглавление