Условный рендеринг

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

Директива if

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

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

class MyComponent extends FASTElement {
    isVisible = true;
}

MyComponent.define({
    name: "my-component",
    template: html<MyComponent>`
        <div>
            ${x => x.isVisible ? html`<p>Этот текст отображается условно</p>` : null}
        </div>
    `
});

Особенности использования if:

  • Выражение должно возвращать булево значение.
  • Можно использовать тернарный оператор для выбора между двумя шаблонами.
  • При изменении свойства isVisible FAST автоматически обновляет DOM.

Директива repeat для условного списка

Иногда условие применяется не к отдельному элементу, а к набору данных. В таких случаях удобно комбинировать if с repeat.

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

const template = html<MyComponent>`
    <ul>
        ${repeat(
            x => x.items.filter(item => item.visible),
            html`<li>${x => x.name}</li>`
        )}
    </ul>
`;

Примечания:

  • repeat автоматически отслеживает изменения массива и обновляет DOM.
  • Использование фильтра внутри repeat позволяет динамически скрывать элементы.

Реактивные свойства и условный рендеринг

Любое свойство, помеченное как реактивное, может быть использовано для управления отображением. Для этого используется декоратор @observable.

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

class ToggleComponent extends FASTElement {
    @observable showContent = false;

    toggle() {
        this.showContent = !this.showContent;
    }
}

ToggleComponent.define({
    name: "toggle-component",
    template: html<ToggleComponent>`
        <button @click=${x => x.toggle()}>Переключить</button>
        ${x => x.showContent ? html`<p>Контент отображается</p>` : null}
    `
});
  • При изменении showContent FAST автоматически перерисует только те части DOM, которые зависят от этого свойства.
  • Изменения реактивных свойств не требуют ручного обновления шаблона.

Условные фрагменты через html-шаблоны

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

const loadingTemplate = html<MyComponent>`<p>Загрузка...</p>`;
const loadedTemplate = html<MyComponent>`<p>Данные загружены</p>`;

const template = html<MyComponent>`
    ${x => x.isLoading ? loadingTemplate : loadedTemplate}
`;

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

  • Повышает читаемость кода при больших блоках условного контента.
  • Позволяет повторно использовать шаблоны в разных местах компонента.

Вложенные условия

FAST поддерживает вложенные тернарные выражения и директивы if, что позволяет строить сложную логику отображения.

${x => x.status === 'loading' ? html`<p>Загрузка...</p>` 
    : x.status === 'error' ? html`<p>Ошибка!</p>` 
    : html`<p>Данные загружены</p>`}
  • Вложенные условия следует использовать аккуратно, чтобы не ухудшать читаемость.
  • Для больших блоков предпочтительно создавать отдельные шаблоны.

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

  1. Использовать реактивные свойства для всех значений, от которых зависит условный рендеринг.
  2. Для больших блоков контента применять отдельные шаблоны через html, чтобы избежать громоздких тернарных выражений.
  3. Комбинировать if и repeat для условного отображения списков с динамическими данными.
  4. Избегать излишней вложенности условий внутри одного шаблона, разбивая логику на несколько шаблонов или компонентов.

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

Оглавление