Типы атрибутов

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

Стандартные атрибуты

Стандартные атрибуты — это обычные свойства HTML-элементов, которые можно объявлять в классе компонента через декоратор @attr. Пример базового определения:

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

class MyElement extends FASTElement {
    @attr title;       // string по умолчанию
    @attr subtitle;    // ещё один строковый атрибут
}

По умолчанию все атрибуты интерпретируются как строки, если не указан иной тип. Любое присвоение значения автоматически конвертируется в строку при отображении в DOM:

В JavaScript доступ к этим атрибутам через свойства:

const elem = document.querySelector("my-element");
console.log(elem.title); // "Главный заголовок"

Boolean-атрибуты

Для флагов и логических значений используется тип boolean. В FAST Element Boolean-атрибуты работают по HTML-спецификации, где присутствие атрибута означает true, а отсутствие — false.

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

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

Использование в HTML:

В первом примере свойство active будет true, во втором — false. Важно, что при изменении свойства через JS значение синхронизируется с DOM автоматически:

const btn = document.querySelector("toggle-button");
btn.active = false;  // атрибут active удаляется из DOM
btn.active = true;   // атрибут active добавляется в DOM

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

Числовые атрибуты используют конструктор Number для приведения значения:

class Counter extends FASTElement {
    @attr({ converter: Number }) count;
}

Любое присвоение строки автоматически преобразуется в число:

const counter = document.querySelector("counter");
console.log(counter.count); // 10 (тип number)

Если значение не может быть преобразовано, результатом будет NaN, что требует обработки в коде.

Кастомные конвертеры

FAST Element позволяет создавать собственные конвертеры для сложных типов атрибутов, таких как объекты, массивы или специфические форматы. Конвертер реализуется как объект с методами fromView и toView:

function jsonConverter() {
    return {
        fromView(value) {
            try {
                return JSON.parse(value);
            } catch {
                return {};
            }
        },
        toView(value) {
            return JSON.stringify(value);
        }
    };
}

class DataElement extends FASTElement {
    @attr({ converter: jsonConverter() }) data;
}

Использование:

const el = document.querySelector("data-element");
console.log(el.data.name); // John

Кастомные конвертеры обеспечивают двустороннюю синхронизацию сложных структур между DOM и объектной моделью.

Атрибуты со связью и наблюдением

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

class ObservableElement extends FASTElement {
    @attr({ mode: "boolean" }) visible;

    visibleChanged(oldValue, newValue) {
        console.log(`visible изменилось с ${oldValue} на ${newValue}`);
    }
}

Метод visibleChanged автоматически вызывается при любом изменении свойства visible. Это позволяет интегрировать логику обновления интерфейса напрямую с изменением атрибутов.

Итоговая схема типов атрибутов

  • String (по умолчанию) — для любых текстовых данных.
  • Boolean — для флагов состояния, с синхронизацией с наличием атрибута в DOM.
  • Number — числовые значения с автоматическим приведением.
  • Custom (converter) — объекты, массивы, сложные форматы с двусторонним преобразованием.
  • Observed — реактивные свойства с вызовом методов propertyChanged.

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

Оглавление