Булевы атрибуты

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

Определение булевых атрибутов

В FAST Element булевы атрибуты определяются с помощью декоратора @attr или через статическое свойство @attr({ mode: 'boolean' }). Основное отличие от обычных строковых атрибутов заключается в том, что наличие атрибута на элементе интерпретируется как true, а его отсутствие — как false.

Пример:

import { FASTElement, attr } from "@microsoft/fast-element";

export class ToggleButton extends FASTElement {
    @attr({ mode: 'boolean' })
    active;
}

В этом примере атрибут active будет автоматически преобразован в булево значение.

<toggle-button active></toggle-button>

Эквивалентно:

toggleButton.active === true;

Если атрибут не указан:

<toggle-button></toggle-button>

То значение будет:

toggleButton.active === false;

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

  1. Наличие атрибута = true, отсутствие = false В отличие от строковых атрибутов, где значение может быть произвольным текстом, булев атрибут полностью определяется фактом наличия атрибута на элементе.

  2. Автоматическая синхронизация со свойством Изменение свойства в JavaScript автоматически обновляет атрибут в DOM:

    toggleButton.active = false;
// HTML станет <toggle-button></toggle-button>

toggleButton.active = true;
// HTML станет <toggle-button active></toggle-button>

  3. Привязка к шаблону В шаблонах FAST можно использовать булевы атрибуты для условного рендеринга или динамического управления классами:

    import { html } from "@microsoft/fast-element";

const template = html<ToggleButton>`
    <button class="${x => x.active ? 'on' : 'off'}">
        ${x => x.active ? 'Включено' : 'Выключено'}
    </button>
`;

    В этом случае изменение свойства active автоматически изменяет текст и класс кнопки.

Настройка режима булевого атрибута

По умолчанию @attr() создаёт строковый атрибут. Чтобы включить булевое поведение, используется параметр mode: 'boolean':

@attr({ mode: 'boolean' })
disabled;

В результате:

<my-element disabled></my-element> <!-- disabled = true -->
<my-element></my-element>          <!-- disabled = false -->

Преобразование работает также при установке через Jav * aScript: любое «истинное» значение (true, "true", 1) устанавливает атрибут, а любое «ложное» значение (false, null, undefined, 0) удаляет атрибут.

Взаимодействие с другими типами атрибутов

Булевы атрибуты можно комбинировать с обычными строковыми и числовыми атрибутами. FAST Element корректно обрабатывает типы, обеспечивая строгую синхронизацию между DOM и свойствами:

@attr
label;

@attr({ mode: 'boolean' })
checked;
<checkbox-component label="Принять условия" checked></checkbox-component>

Свойство checked становится true, а label хранит строку "Принять условия".

Рекомендации по использованию

  • Использовать для переключателей состояния: checked, disabled, active, visible.
  • Не использовать для значений с несколькими состояниями, где необходимы конкретные строки или числа.
  • Полагаться на автоматическую синхронизацию между свойствами и атрибутами, избегая ручного управления DOM.

Булевы атрибуты в FAST Element обеспечивают чистый и предсказуемый способ управления состояниями компонентов, сохраняя синхронность между свойствами и DOM, а также упрощая создание реактивных интерфейсов.

Оглавление