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

Привязка атрибутов (attribute binding) является ключевым механизмом работы Slim.js, позволяющим синхронизировать состояние модели с DOM. Она обеспечивает автоматическое обновление элементов интерфейса при изменении данных и уменьшает необходимость ручного управления состоянием.

Основы привязки атрибутов

В Slim.js привязка атрибутов осуществляется через директиву sl-bind, которая позволяет связывать значение свойства компонента с конкретным атрибутом HTML-элемента. Синтаксис выглядит следующим образом:

<input sl-bind="value: username">

В данном примере атрибут value элемента <input> привязан к свойству username компонента. Любое изменение username автоматически обновит значение поля ввода.

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

  • Поддерживаются как стандартные атрибуты (value, src, href), так и кастомные (data-*).
  • Slim.js использует реактивную модель: обновления происходят только при изменении значения свойства.
  • Атрибуты могут быть связаны не только с примитивными типами, но и с объектами и массивами, при условии, что используется реактивная обёртка Slim.observable.

Привязка нескольких атрибутов

Slim.js позволяет одновременно привязывать несколько атрибутов к разным свойствам:

<img sl-bind="src: userAvatar, alt: userName">

Здесь src изменяется при обновлении userAvatar, а alt — при изменении userName. Такая синхронизация избавляет от необходимости писать дополнительные обработчики для каждого атрибута.

Вычисляемые атрибуты

Для сложных сценариев возможна привязка вычисляемых значений через функции:

<div sl-bind="title: () => `${firstName} ${lastName}`">
</div>

Функция автоматически пересчитывается при изменении любых зависимых свойств (firstName, lastName) и обновляет атрибут title. Slim.js использует систему слежения за зависимостями, что делает вычисляемые атрибуты эффективными.

Условная привязка атрибутов

Иногда требуется динамически добавлять или удалять атрибуты. Для этого используется тернарный оператор или булева логика:

<button sl-bind="disabled: !isActive">Отправить</button>

Если isActive равно false, атрибут disabled будет добавлен к кнопке, блокируя её. При изменении isActive атрибут автоматически удаляется.

Привязка пользовательских атрибутов

Slim.js поддерживает работу с кастомными атрибутами и data-*:

<div sl-bind="data-status: status"></div>

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

Примеры с компонентами

В компонентах Slim.js привязка атрибутов часто комбинируется с событиями:

class UserProfile extends Slim {
  constructor() {
    super();
    this.username = 'Alice';
    this.avatar = 'avatar.png';
  }

  get template() {
    return `
      <div>
        <input sl-bind="value: username" sl-on="input: updateUsername">
        <img sl-bind="src: avatar, alt: username">
      </div>
    `;
  }

  updateUsername(event) {
    this.username = event.target.value;
  }
}

customElements.define('user-profile', UserProfile);

В этом примере поле ввода и изображение аватара связаны с состоянием компонента. Любое изменение username обновляет value в <input> и alt у <img> одновременно.

Особенности обновления атрибутов

Slim.js использует делегирование обновлений и минимизацию операций с DOM:

  • Если новое значение атрибута совпадает с текущим, обновление не выполняется.
  • Изменения выполняются только для тех атрибутов, которые реально изменились.
  • Для массивов и объектов используется реактивная обёртка Slim.observable, что позволяет автоматически отслеживать изменения вложенных свойств.

Привязка с модификаторами

Для контроля формата значения можно использовать модификаторы:

<input sl-bind="value: username | uppercase">

Модификатор uppercase преобразует значение перед отображением в DOM. Slim.js позволяет создавать собственные модификаторы, что расширяет возможности привязки атрибутов.

Итог

Привязка атрибутов в Slim.js — мощный инструмент для синхронизации состояния модели с интерфейсом. Она поддерживает:

  • Одностороннюю и двустороннюю привязку.
  • Множественные атрибуты.
  • Вычисляемые и условные значения.
  • Кастомные и data-* атрибуты.
  • Минимизацию операций с DOM и модификаторы для преобразования значений.

Использование этой функциональности позволяет создавать высокоэффективные, динамичные компоненты с минимальным количеством ручного кода.

Оглавление