Динамическая генерация шаблонов

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

Реактивные шаблоны

В FAST Element шаблон определяется с помощью функции html из пакета @microsoft/fast-element. Любая часть шаблона может быть связана с реактивными свойствами класса компонента через биндинги. Биндинги бывают следующих типов:

  • Текстовые биндинги: \${property} Используются для вставки значений свойств в текстовый контент элементов.

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

const template = html<MyElement>`
  <p>Привет, ${x => x.name}!</p>
`;

class MyElement extends FASTElement {
  name = "Мир";
}

  • Атрибутные биндинги: <div class="${x => x.className}"></div> Позволяют динамически задавать классы, стили и другие атрибуты.

  • Объектные биндинги: <input :value="${x => x.value}"> Используются для двустороннего связывания свойств с DOM-атрибутами.

Условная генерация контента

FAST Element поддерживает условное рендеринг через директиву when. Она позволяет включать или исключать фрагменты DOM в зависимости от условий.

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

const template = html<MyElement>`
  ${when(x => x.isLoggedIn, html<MyElement>`<p>Добро пожаловать, ${x => x.user}!</p>`)}
`;
  • Первый аргумент функции when — функция, возвращающая булево значение.
  • Второй аргумент — шаблон, который вставляется при истинности условия.
  • Можно указать третий аргумент для альтернативного шаблона.

Итеративная генерация элементов

Для создания списков используется директива repeat, которая позволяет динамически рендерить коллекции:

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

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

Динамические компоненты

В FAST Element можно создавать элементы с полностью динамическим содержимым, комбинируя when, repeat и обычные биндинги:

const template = html<MyElement>`
  ${repeat(x => x.sections, html<Section>`
    <section>
      <h2>${s => s.title}</h2>
      ${when(s => s.showContent, html<Section>`<p>${s => s.content}</p>`)}
    </section>
  `)}
`;

Такой подход обеспечивает максимальную гибкость, позволяя строить сложные интерфейсы с вложенной динамикой и условным отображением.

Реактивные методы для генерации шаблонов

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

const template = html<MyElement>`
  <p>${x => x.computeMessage()}</p>
`;

class MyElement extends FASTElement {
  value = 10;

  computeMessage() {
    return this.value > 5 ? "Значение больше 5" : "Значение меньше или равно 5";
  }
}

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

Использование шаблонных функций

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

const cardTemplate = (item) => html`
  <div class="card">
    <h3>${() => item.title}</h3>
    <p>${() => item.description}</p>
  </div>
`;

const template = html<MyElement>`
  ${repeat(x => x.cards, cardTemplate)}
`;

Такой подход уменьшает дублирование кода и облегчает поддержку динамических интерфейсов.

Производительность и обновления

  • Директивы when и repeat минимизируют манипуляции с DOM, обновляя только изменившиеся части.
  • FAST Element использует реактивные свойства и наблюдаемые массивы, что делает динамическую генерацию быстрым и эффективным инструментом.
  • Комбинация реактивных методов и шаблонных функций позволяет строить сложные интерфейсы без ручного управления DOM.

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

Оглавление