В архитектуре FAST Element шаблон служит описанием структуры DOM-элемента и его связывания с моделью данных. Вложенные шаблоны обеспечивают механизм композиции интерфейса, позволяя распределять логику по более мелким частям и переиспользовать их в различных контекстах. В отличие от статичной разметки, вложенные шаблоны корректно обновляются при изменении состояния, что делает их основой для построения сложных интерфейсов.
Концепция вложенности. Шаблон может быть включён
внутрь другого шаблона через компонент или управляющую конструкцию FAST
(например, repeat, when, switch).
Вложенность формирует дерево представления, где каждый узел связан с
собственным состоянием и контекстом привязки.
Контекст данных. Каждый уровень вложенности обладает собственным контекстом, наследующим родительский, но потенциально расширяемым локальными значениями. Таким образом достигается гибкость в доступе к данным при генерации DOM-структуры.
Обновление и диффинг. FAST использует эффективные механизмы сравнения и обновления дерева шаблонов. Изменения в состоянии отражаются только на тех участках шаблона, которые зависят от обновлённых данных, что предотвращает избыточные операции над DOM.
Вложенные шаблоны встраиваются через пользовательские элементы,
зарегистрированные с помощью FASTElement.define().
Компонент определяет собственный шаблон и стиль, а затем может быть
использован внутри других компонентов.
Ключевые элементы конструкции:
template: описывает визуальный слой и привязки.styles: задаёт стилизацию компонента.define(): регистрирует элемент в DOM и связывает его с
именем.Компонент способен включать дочерние элементы без знания их конкретной реализации. Этот принцип создаёт слабую связанность и облегчает масштабирование проекта.
FAST предоставляет набор специализированных директив для работы с вложенными шаблонами.
repeat Создаёт множество экземпляров
вложенного шаблона на основе коллекции данных. Каждый экземпляр получает
собственный элемент контекста, что позволяет формировать списки, таблицы
и другие повторяющиеся структуры.
when Позволяет включать шаблон условно.
Вложенный участок активируется только при выполнении заданного условия,
уменьшая нагрузку на рендеринг.
switch Организует выбор одного из
множества вложенных шаблонов по нескольким условиям. Этот подход полезен
при создании интерфейсов с различными режимами отображения.
Контекст вложенного шаблона формируется по цепочке: глобальный → компонентный → локальный. Для передачи данных используются:
${expression});Если вложенный шаблон формируется внутри repeat,
контекст дополняется текущим элементом коллекции и индексом. Это
позволяет создавать динамические структуры с минимальным количеством
кода.
Композиция шаблонов — основной механизм структурирования пользовательского интерфейса в FAST. Вместо монолитных компонентов создаются маленькие функциональные строительные блоки, которые комбинируются друг с другом.
Преимущества композиции:
Каждый компонент может определять собственные стили. При вложенной структуре это предотвращает конфликты селекторов и повышает предсказуемость внешнего вида. FAST применяет механизм, аналогичный Shadow DOM, но более лёгкий по накладным расходам.
Допускается объединять стили нескольких вложенных шаблонов в модульные дизайн-системы. Важно обеспечить согласованность токенов (размеров, цветов, отступов), чтобы интерфейс оставался единообразным.
При изменении состояния или входных данных FAST не пересоздаёт весь DOM. Используются следующие оптимизации:
При работе с repeat используется отслеживание
идентификаторов, что позволяет перемещать элементы без полной
перерисовки.
Вложенные шаблоны легко адаптируются под внешние источники данных. Один компонент может отвечать за загрузку данных, а вложенные компоненты — за их представление. Такой подход создаёт чёткую границу между логикой и отображением.
Интеграция с маршрутизацией, формами, состоянием приложения и сетевыми сервисами упрощается благодаря тому, что вложенные шаблоны не требуют глобальной видимости и могут существовать автономно.
Сложные приложения часто образуют многоуровневое дерево компонентов. FAST допускает произвольную глубину вложенности, не ухудшая производительность. Оптимизации движка позволяют свести количество реактивных обновлений к минимуму.
Однако чрезмерная глубина без осмысленной структуры усложняет сопровождение. Рекомендуется формировать ясные границы ответственности между уровнями вложенности.
FAST поддерживает концепцию слотов, позволяя передавать вложенные шаблоны в качестве содержимого. Это даёт возможность создавать гибкие компоненты, где внешний шаблон определяет расположение и назначение областей, а внутренний — наполнение.
Слоты полезны в компонентах контейнерного типа, например карточках, панелях или диалоговых окнах, где вложенный шаблон задаёт содержимое, но не структуру.
Вложенные шаблоны способны реагировать на пользовательские события через привязки обработчиков. События могут подниматься вверх по дереву, что позволяет организовать логику взаимодействия без прямых ссылок между компонентами. Такой подход минимизирует связанность и облегчает рефакторинг структуры.
При проектировании интерфейса на основе FAST вложенные шаблоны служат границей областей ответственности. Каждый компонент отвечает за собственное состояние, а вложенный шаблон — за конкретный участок отображения, без дублирования логики.
Разделение улучшает структурную целостность интерфейса и облегчает внедрение новых функций. Компоненты можно заменять или перестраивать без вмешательства в другие элементы дерева.
FAST оптимизирует вложенные шаблоны на нескольких уровнях:
Эти механизмы обеспечивают высокую производительность даже при большом количестве вложенностей и динамических обновлений.
Вложенные шаблоны образуют фундамент композиционной модели FAST Element. Они определяют структуру интерфейса, распределяют логику, несут ответственность за отображение данных и обеспечивают гибкость при построении пользовательских компонентов разной сложности. Такая модель делает возможным создание масштабируемых UI-систем, органично сочетающих модульность, производительность и выразительность.