Типы шаблонов

FAST Element — это библиотека для создания Web Components с использованием декларативного синтаксиса, реактивных свойств и шаблонов. Основной строительный блок интерфейса в FAST Element — шаблон, который определяет, как элемент отображается и реагирует на изменения состояния. В библиотеке выделяются несколько типов шаблонов, каждый из которых имеет свои особенности и области применения.

Шаблон на основе строки HTML

Наиболее простой способ создания шаблона — использование строки HTML. Для этого применяется функция html из пакета @microsoft/fast-element:

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

const myTemplate = html<MyElement>`
    <div class="container">
        <h1>${x => x.title}</h1>
        <p>${x => x.description}</p>
    </div>
`;

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

  • Поддержка интерполяции значений через стрелочные функции.
  • Реактивность: изменения свойств элемента автоматически обновляют DOM.
  • Позволяет комбинировать обычный HTML и FAST-синтаксис привязки.

Шаблон с условной отрисовкой

Для управления видимостью элементов в шаблоне используется директива when. Она позволяет рендерить блок только при выполнении условия:

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

const myTemplate = html<MyElement>`
    ${when(x => x.isVisible, html<MyElement>`
        <p>Элемент видим</p>
    `)}
`;

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

  • Первый аргумент функции when — условие, возвращающее true или false.
  • Второй аргумент — шаблон, который будет вставлен при выполнении условия.
  • Есть возможность передать третий аргумент для альтернативного шаблона (else).

Шаблон с циклической генерацией элементов

Для работы с массивами данных используется директива repeat:

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

const myTemplate = html<MyElement>`
    <ul>
        ${repeat(x => x.items, html<string>`
            <li>${item => item}</li>
        `)}
    </ul>
`;

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

  • Первый аргумент — функция, возвращающая массив.
  • Второй аргумент — шаблон для каждого элемента массива.
  • Поддерживает ключи для оптимизации обновления DOM: repeat(items, template, { key: x => x.id }).

Шаблон с обработкой событий

FAST Element позволяет привязывать обработчики событий прямо в шаблоне:

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

const myTemplate = html<MyElement>`
    <button @click=${x => x.handleClick()}>Нажми меня</button>
`;

Важные моменты:

  • Синтаксис @событие позволяет напрямую связать DOM-события с методами элемента.
  • Обработчики сохраняют контекст this, что упрощает работу с внутренними свойствами.

Шаблон с вложенными компонентами

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

import { html } from "@microsoft/fast-element";
import "./my-child.js";

const myTemplate = html<MyElement>`
    <my-child name=${x => x.childName}></my-child>
`;

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

  • Привязка свойств к вложенным компонентам осуществляется через ${x => x.property}.
  • Реактивность распространяется на свойства дочернего элемента, если они объявлены как наблюдаемые.

Шаблон с динамическими атрибутами и стилями

FAST Element позволяет динамически изменять атрибуты и CSS-свойства:

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

const myTemplate = html<MyElement>`
    <div class="box" style="color: ${x => x.color};" title="${x => x.tooltip}">
        Содержимое блока
    </div>
`;

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

  • Любой атрибут можно сделать реактивным.
  • CSS-переменные и inline-стили можно менять через привязки.
  • Для классов используется объектная синтаксис через директиву classMap (подключается из @microsoft/fast-element/).

Использование шаблонов внутри классов элементов

FAST Element связывает шаблон с классом элемента через декоратор @customElement или функцию FASTElement.define:

import { FASTElement, customElement, html, observable } from "@microsoft/fast-element";

const template = html<MyElement>`
    <h1>${x => x.title}</h1>
`;

@customElement({ name: "my-element", template })
class MyElement extends FASTElement {
    @observable title = "Пример";
}

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

  • Свойства, помеченные как @observable, автоматически обновляют шаблон при изменении.
  • Шаблон может использовать методы класса и вычисляемые свойства.
  • Поддерживаются сложные конструкции с repeat, when и вложенными компонентами.

Выводы по типам шаблонов

  1. Строковые шаблоны HTML — основной и самый простой способ.
  2. Условные шаблоны (when) — управление отображением по логике.
  3. Циклические шаблоны (repeat) — рендеринг массивов данных.
  4. Событийные шаблоны (@event) — привязка событий к методам элемента.
  5. Динамические атрибуты и стили — реактивная настройка внешнего вида.
  6. Вложенные компоненты — возможность создавать сложные интерфейсы с композицией элементов.

Использование этих типов шаблонов в сочетании позволяет строить гибкие, масштабируемые и полностью реактивные веб-компоненты на базе FAST Element.

Оглавление