Boolean атрибуты

Boolean атрибуты в веб-компонентах и в библиотеке Atomico представляют собой особый тип свойств, которые могут принимать только два состояния: true или false. В отличие от обычных свойств, их присутствие в DOM указывает на значение true, а отсутствие — на false. Atomico предоставляет удобные средства для работы с такими атрибутами через декларацию свойств компонента и реактивное обновление интерфейса.

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

В Atomico свойства компонента объявляются с помощью функции props. Для Boolean атрибута необходимо указать его тип Boolean:

import { c, props, html } from "atomico";

const MyCheckbox = c(() => html`
    <label>
        <input type="checkbox" checked="${props.checked}" />
        Включить опцию
    </label>
`, {
    props: {
        checked: Boolean
    }
});
  • checked — Boolean атрибут, который может быть true или false.
  • В DOM <input> элемент использует атрибут checked, который синхронизируется с состоянием свойства.

Присвоение и реактивность

Boolean атрибуты в Atomico автоматически преобразуются при присвоении:

<MyCheckbox checked />
<MyCheckbox checked={false} />
  • Если атрибут указан без значения, он считается true.
  • Если атрибут отсутствует или явно указан как false, то свойство имеет значение false.

Atomico отслеживает изменения Boolean свойств и автоматически обновляет DOM:

const Toggle = c(() => {
    const state = useState(false);

    return html`
        <button onCl ick="${() => state.value = !state.value}">
            ${state.value ? "Включено" : "Выключено"}
        </button>
        <MyCheckbox checked="${state.value}" />
    `;
});
  • Изменение state.value мгновенно синхронизируется с атрибутом checked в дочернем компоненте.

Связь с DOM

Boolean атрибуты в Atomico соответствуют стандартной модели HTML:

  • Присутствие атрибута → true
  • Отсутствие атрибута → false

Пример для <input>:

<input type="checkbox" checked />
<input type="checkbox" />
  • Первый элемент активен (checked = true).
  • Второй элемент не активен (checked = false).

Atomico позволяет поддерживать эту синхронизацию через реактивные свойства без дополнительного кода для обновления DOM.

События и Boolean атрибуты

Для управления состоянием Boolean атрибутов часто используются события. Например, для <input type="checkbox">:

const MyCheckbox = c(({ checked }) => {
    const handleChange = (event) => {
        checked.value = event.target.checked;
    };

    return html`
        <input type="checkbox" .checked="${checked}" onCha nge="${handleChange}" />
    `;
}, {
    props: {
        checked: Boolean
    }
});
  • checked.value синхронизируется с состоянием элемента.
  • Использование .checked (с точкой) позволяет напрямую связывать DOM свойство, а не атрибут.

Передача Boolean атрибутов в дочерние компоненты

Atomico поддерживает проброс Boolean атрибутов в дочерние компоненты:

<MyCheckbox checked="${parentChecked}" />
  • parentChecked — реактивное свойство родителя.
  • Любое изменение в родителе автоматически обновляет дочерний компонент.
  • Обратная связь возможна через события или двустороннее связывание.

Особенности и подводные камни

  1. Ложные значения: Любое значение, кроме false, null или undefined, считается true при передаче Boolean атрибута в DOM.

    <MyCheckbox checked="false" /> <!-- это будет true! -->

    Чтобы корректно передавать false, необходимо использовать checked={false} или исключать атрибут полностью.

  2. Свойство vs атрибут:

    • Атрибуты в DOM — строковые представления.
    • Свойства компонентов Atomico — настоящие Boolean.
    • Для прямой синхронизации с DOM нужно использовать привязку через точку: .checked="${value}".

  3. Реактивность: Boolean свойства полностью интегрированы с реактивной системой Atomico. Любое изменение значения мгновенно отражается в DOM, что избавляет от ручного управления состоянием.

Примеры комбинирования

Boolean атрибуты удобно комбинировать с условной отрисовкой и классами:

const ToggleButton = c(({ active }) => html`
    <button class="${active ? 'active' : ''}">
        ${active ? 'Вкл' : 'Выкл'}
    </button>
`, {
    props: {
        active: Boolean
    }
});
  • active управляет состоянием кнопки и ее классом.
  • Изменения свойства автоматически перерисовывают компонент.

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

Оглавление