Синтаксис html-функции

html — это ключевая функция в библиотеке FAST Element, используемая для описания шаблонов компонентов. Она является Tagged Template Literal и позволяет создавать декларативные шаблоны с поддержкой реактивности и биндингов. Основное назначение html — связывать HTML-разметку с данными компонентов и обеспечивать её динамическое обновление при изменении состояния.

Tagged Template Literal

Функция html вызывается с использованием синтаксиса шаблонных литералов:

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

const template = html`<div>Hello, ${x => x.name}!</div>`;

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

  • Выражения внутри ${} могут быть функциями, которые принимают объект данных компонента (x) и возвращают значение для вставки.
  • Статический текст и разметка остаются неизменными, динамическая часть отслеживается библиотекой для обновления DOM.
  • Поддерживается вложенная разметка, атрибуты, события и условные конструкции через биндинги.

Динамические атрибуты

Атрибуты элементов можно связывать с реактивными свойствами компонента. Для этого используется синтаксис ${x => x.property}:

const buttonTemplate = html`
  <button disabled="${x => x.isDisabled}">
    ${x => x.label}
  </button>
`;

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

  • FAST Element автоматически обновляет значение атрибута при изменении свойства.
  • Атрибуты, значение которых вычисляется функцией, поддерживают булевы, строковые и числовые типы.
  • Если функция возвращает null или undefined, атрибут удаляется из DOM.

Вставка текста и HTML-контента

Для вставки текста применяется стандартная конструкция ${}. Для безопасного вставления HTML используется директива html внутри шаблона:

const contentTemplate = html`
  <div>${x => x.text}</div>
  <div>${x => html`${x.rawHtml}`}</div>
`;
  • Первый пример вставляет текст без интерпретации HTML.
  • Второй пример позволяет динамически рендерить HTML-код внутри компонента.

Условные выражения

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

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

const conditionalTemplate = html`
  ${when(
    x => x.isVisible,
    html`<p>Элемент видим</p>`,
    html`<p>Элемент скрыт</p>`
  )}
`;
  • when принимает условие и два шаблона: для истинного и ложного случая.
  • Позволяет минимизировать манипуляции с DOM и полностью полагаться на реактивность.

Циклы и повторяющиеся элементы

Повторение элементов реализуется через директиву repeat:

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

const listTemplate = html`
  <ul>
    ${repeat(
      x => x.items,
      html`<li>${item => item}</li>`
    )}
  </ul>
`;
  • Первый аргумент функции repeat — источник данных (массив).
  • Второй аргумент — шаблон для каждого элемента.
  • FAST Element автоматически отслеживает изменения массива и обновляет DOM без полной перерисовки.

Привязка событий

События можно связывать через синтаксис @event:

const clickTemplate = html`
  <button @click="${x => x.handleClick()}">Нажми меня</button>
`;
  • При вызове события FAST Element вызывает указанную функцию компонента с контекстом объекта данных.
  • Поддерживается любое стандартное DOM-событие (click, input, change и др.).

Вложенные шаблоны и слоты

html поддерживает вложенные шаблоны и работу со слотами:

const cardTemplate = html`
  <div class="card">
    <slot name="header"></slot>
    <div class="content">
      ${x => x.content}
    </div>
    <slot></slot>
  </div>
`;
  • Вложенные шаблоны позволяют строить сложные структуры без потери реактивности.
  • Слоты обеспечивают гибкость для включения стороннего контента.

Комбинирование шаблонов

Шаблоны могут быть объединены для повторного использования компонентов:

const headerTemplate = html`<h1>${x => x.title}</h1>`;
const pageTemplate = html`
  ${headerTemplate}
  <p>${x => x.description}</p>
`;
  • FAST Element гарантирует корректное обновление всех вложенных шаблонов при изменении данных.
  • Позволяет создавать модульные и переиспользуемые UI-компоненты.

Реактивные выражения

Любое выражение внутри ${} автоматически становится реактивным:

const reactiveTemplate = html`
  <p>${x => x.count * 2}</p>
`;
  • При изменении count FAST Element обновит DOM без необходимости дополнительного кода.
  • Обеспечивается высокая производительность за счет минимального пересоздания узлов.

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

Оглавление