Встроенные директивы

FAST Element предоставляет мощный механизм для декларативного управления DOM через встроенные директивы. Они позволяют изменять отображение элементов, управлять состояниями и связывать данные без необходимости ручного манипулирования DOM. Основные встроенные директивы включают if, repeat, when, attr, ref, html и text.

Директива if

Директива if используется для условного рендеринга элементов. Она позволяет вставлять или удалять элементы из DOM в зависимости от логического выражения.

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

const template = html<MyElement>`
  ${x => x.show ? html`<p>Элемент отображается</p>` : html``}
`;

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

  • Рендеринг происходит только при истинности выражения.
  • При изменении состояния директива автоматически обновляет DOM.
  • Удобно использовать для управления видимостью блоков без использования display: none.

Директива repeat

Директива repeat предназначена для повторения шаблонов на основе массивов или коллекций.

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

const template = html<MyElement>`
  ${repeat(x => x.items, html<Item>`<li>${x => x.name}</li>`)}
`;

Преимущества repeat:

  • Автоматическое отслеживание изменений в массиве (добавление, удаление, обновление элементов).
  • Возможность задавать ключи для оптимизации повторного рендеринга.
  • Позволяет создавать сложные списки с минимальным количеством кода.
repeat(
  x => x.items,
  html<Item>`<li>${x => x.name}</li>`,
  { key: x => x.id } // уникальный идентификатор для оптимизации
);

Директива when

Директива when служит для условного рендеринга с поддержкой альтернативного контента. Она является расширением if и позволяет указывать блок else.

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

const template = html<MyElement>`
  ${when(
    x => x.isLoggedIn,
    html`<p>Добро пожаловать!</p>`,
    html`<p>Пожалуйста, войдите в систему.</p>`
  )}
`;

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

  • Обеспечивает более читаемую альтернативу тернарному оператору внутри шаблонов.
  • Полезно для управления пользовательским интерфейсом на основе состояния приложения.

Директива attr

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

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

const template = html<MyElement>`
  <button ${x => attr('disabled', x.isDisabled)}>Нажми меня</button>
`;

Ключевые моменты:

  • Позволяет динамически добавлять, изменять или удалять атрибуты.
  • Можно управлять boolean-атрибутами (disabled, checked) без ручного присваивания строковых значений.
  • Поддерживает любые HTML-атрибуты и кастомные атрибуты веб-компонентов.

Директива ref

Директива ref используется для получения прямой ссылки на DOM-элемент внутри шаблона.

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

const template = html<MyElement>`
  <input ${ref('inputElement')} type="text" />
`;

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

  • Элемент автоматически привязывается к свойству класса (this.inputElement).
  • Удобно для работы с нативными методами DOM и внешними библиотеками.
  • Поддерживает обновление ссылки при повторном рендеринге.

Директива html и text

Директива html позволяет вставлять разметку HTML внутри шаблона, а text — безопасно вставлять текст без HTML-парсинга.

const template = html<MyElement>`
  <div>${x => html`${x.dynamicHtml}`}</div>
  <p>${x => text(x.dynamicText)}</p>
`;

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

  • html рендерит HTML как шаблон FAST Element.
  • text предотвращает XSS и вставляет только текстовое содержимое.
  • Используются для динамического формирования контента без ручного создания элементов DOM.

Практические рекомендации

  • Для условного отображения использовать if или when, в зависимости от необходимости блока else.
  • Для списков и коллекций использовать repeat с ключами для повышения производительности.
  • Для динамических атрибутов и boolean-атрибутов применять attr.
  • Для прямого доступа к DOM использовать ref.
  • Для вставки HTML или текста использовать html и text в зависимости от безопасности и типа содержимого.

Эти встроенные директивы позволяют создавать реактивные и производительные веб-компоненты, минимизируя ручное управление DOM и делая код шаблонов чистым и декларативным.

Оглавление