Работа с булевыми атрибутами

Булевы атрибуты в HTML представляют собой специальные свойства элементов, которые могут быть либо включены, либо отсутствовать. В отличие от обычных атрибутов, их наличие уже определяет значение как true, а отсутствие — как false. Примеры: disabled, checked, readonly, selected.

В Slim.js работа с булевыми атрибутами осуществляется через реактивные свойства компонентов, что обеспечивает синхронизацию состояния интерфейса с моделью данных.

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

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

class ToggleButton extends Slim {
  get useShadow() { return true; }

  constructor() {
    super();
    this.isActive = false;
  }

  template() {
    return `
      <button disabled="{!isActive}">
        Нажми меня
      </button>
      <input type="checkbox" checked="{isActive}">
    `;
  }

  toggle() {
    this.isActive = !this.isActive;
  }
}

customElements.define('toggle-button', ToggleButton);
  • Атрибут disabled="{!isActive}" становится активным, когда isActive равен false.
  • Атрибут checked="{isActive}" синхронизируется с состоянием компонента.

Важно: в Slim.js булевы атрибуты не требуют указания значения (disabled="true"), достаточно наличия выражения в фигурных скобках.

Реактивное обновление

Slim.js автоматически отслеживает изменения свойств компонента и обновляет DOM. Для булевых атрибутов это означает, что достаточно изменить свойство, и атрибут будет корректно добавлен или удален:

this.isActive = true;  // checkbox автоматически становится отмеченным
this.isActive = false; // атрибут removed, checkbox снимается

Внутри шаблона используются логические выражения для более гибкой привязки:

<button disabled="{!user.canEdit || isLocked}">
  Редактировать
</button>

Здесь кнопка будет заблокирована, если пользователь не имеет прав canEdit или если состояние isLocked истинно.

Динамическое управление атрибутами через методы

Иногда необходимо управлять булевыми атрибутами программно, не через шаблон:

this.shadowRoot.querySelector('button').disabled = true;

Хотя это работает, использование реактивного свойства предпочтительнее, так как:

  1. Обеспечивает согласованность состояния компонента и DOM.
  2. Избавляет от необходимости вручную следить за изменениями.
  3. Позволяет использовать вычисляемые выражения в шаблоне.

Булевы атрибуты и условный рендеринг

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

template() {
  return `
    ${this.isVisible ? `<input type="checkbox" checked>` : ''}
    <button disabled="{!this.isVisible}">Отправить</button>
  `;
}
  • Если isVisible ложь, элемент <input> не рендерится вовсе.
  • Атрибут disabled кнопки синхронизирован с тем же состоянием.

Это особенно полезно для форм с динамическими полями и переключателями состояния.

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

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

class CustomElement extends Slim {
  get useShadow() { return true; }

  constructor() {
    super();
    this.isHighlighted = false;
  }

  template() {
    return `
      <div highlighted="{isHighlighted}">
        Контент
      </div>
    `;
  }
}

customElements.define('custom-element', CustomElement);

При изменении isHighlighted Slim.js автоматически добавляет или удаляет атрибут highlighted на элементе <div>.

Лайфхаки и рекомендации

  • Использовать реактивные свойства вместо прямой модификации DOM для булевых атрибутов.
  • Для атрибутов типа checked, disabled, readonly использовать логические выражения для управления состоянием.
  • Булевы атрибуты, которые не могут быть напрямую вычислены в шаблоне, можно контролировать через вычисляемые свойства:
get canSubmit() {
  return this.isFormValid && !this.isSubmitting;
}
<button disabled="{!canSubmit}">Отправить</button>
  • При работе с пользовательскими булевыми атрибутами следить за их логическим соответствием свойствам компонента, чтобы избежать рассинхронизации состояния.

Булевы атрибуты в Slim.js являются мощным инструментом для создания реактивных интерфейсов. Их правильное использование упрощает управление состоянием элементов, делает код компактным и поддерживаемым, а также обеспечивает гибкость при работе с динамическими компонентами.

Оглавление