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

Условный рендеринг в Slim.js позволяет динамически управлять отображением элементов на странице в зависимости от состояния данных. В отличие от прямого манипулирования DOM через методы вроде appendChild или removeChild, Slim.js использует декларативный подход, что делает код более читаемым и поддерживаемым.

Атрибут if

Ключевой механизм условного рендеринга — это атрибут if. Он принимает логическое выражение, которое вычисляется в контексте компонента. Если выражение истинно, элемент добавляется в DOM; если ложно — элемент удаляется.

Пример использования:

class UserStatus extends Slim {
  constructor() {
    super();
    this.loggedIn = false;
  }

  get template() {
    return `
      <div>
        <p if="loggedIn">Вы вошли в систему</p>
        <p if="!loggedIn">Пожалуйста, войдите</p>
        <button oncl ick="this.toggleLogin()">Переключить статус</button>
      </div>
    `;
  }

  toggleLogin() {
    this.loggedIn = !this.loggedIn;
    this.update();
  }
}

Slim.tag('user-status', UserStatus);

В этом примере:

  • <p if="loggedIn"> отображается только тогда, когда loggedIn равно true.
  • <p if="!loggedIn"> отображается при обратном значении.
  • Метод update() пересчитывает шаблон и обновляет DOM без ручного вмешательства.

Атрибут show и hide

Slim.js также предоставляет show и hide для управления видимостью через CSS, не удаляя элемент из DOM. Разница с if заключается в том, что if полностью исключает элемент, а show/hide лишь меняют свойство display.

Пример:

<div show="isVisible">Этот текст можно скрыть</div>

Если isVisible равно false, элемент получает стиль display: none, но остаётся в DOM, сохраняя все свои состояния и события.

Условная вставка компонентов

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

class AppView extends Slim {
  constructor() {
    super();
    this.showProfile = false;
  }

  get template() {
    return `
      <button oncl ick="this.toggleProfile()">Показать профиль</button>
      <profile-card if="showProfile"></profile-card>
    `;
  }

  toggleProfile() {
    this.showProfile = !this.showProfile;
    this.update();
  }
}

Slim.tag('app-view', AppView);

В этом случае <profile-card> создаётся только при условии showProfile === true. Это снижает нагрузку на браузер и упрощает управление состоянием.

Логические выражения и вложенные условия

В if можно использовать любые выражения, включая логические операции и вызовы методов компонента:

<p if="user.isAdmin && user.isActive">Администратор активен</p>
<p if="!user.isAdmin || !user.isActive">Обычный пользователь или неактивен</p>

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

get canEdit() {
  return this.user.isAdmin && this.user.hasEditRights;
}

<p if="canEdit">Редактирование доступно</p>

Такой подход делает шаблон лаконичным и легко читаемым.

Работа с массивами и динамическими списками

Часто условный рендеринг комбинируется с итерациями по массивам через атрибут repeat. Элементы могут отображаться только при выполнении определённого условия:

<li repeat="item in items" if="item.active">{{item.name}}</li>

Эта конструкция гарантирует, что в списке будут только активные элементы. При изменении свойства item.active вызывается update(), и DOM синхронизируется автоматически.

Особенности производительности

  • Элементы с if создаются и уничтожаются полностью. Это экономит память при работе с большими компонентами.
  • Атрибуты show и hide не трогают структуру DOM, что позволяет сохранять внутренние состояния и события.
  • Slim.js оптимизирует повторное использование узлов при обновлении, минимизируя перестройку дерева.

Взаимодействие с событиями

При удалении элементов через if все события, привязанные к ним, автоматически очищаются. Это предотвращает утечки памяти. Если необходимо сохранить состояние, лучше использовать show/hide или хранить данные в компоненте.

Практические советы

  • Для простых переключателей состояния лучше использовать if.
  • Для скрытия элементов, где важна сохранность состояния (например, формы с введёнными данными) предпочтителен show.
  • Логические геттеры и методы помогают держать шаблон чистым и легко читаемым.
  • Комбинирование repeat и if упрощает работу с динамическими коллекциями.

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

Оглавление