Директива s:if

Директива s:if используется для условного рендеринга элементов в DOM. Она позволяет отображать или скрывать элементы в зависимости от значения выражения, привязанного к состоянию компонента. В Slim.js это ключевой инструмент управления отображением интерфейса без необходимости напрямую манипулировать DOM через методы appendChild или removeChild.

Синтаксис

<div s:if="условие">
    Контент, отображаемый при истинности условия
</div>
  • условие — JavaScript-выражение, которое возвращает true или false.
  • Элемент рендерится только если выражение истинно (true). При ложном значении (false) элемент полностью удаляется из DOM.

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

<div s:if="isLoggedIn">
    Добро пожаловать, пользователь!
</div>

В этом примере блок с текстом отображается только если переменная isLoggedIn имеет значение true.

class App extends Slim {
    isLoggedIn = false;

    toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn;
    }
}

customElements.define('my-app', App);

При вызове метода toggleLogin() значение isLoggedIn меняется, и элемент с s:if автоматически добавляется или удаляется из DOM.

Поддержка сложных условий

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

<div s:if="user && user.isAdmin">
    Панель администратора
</div>

<div s:if="!items.length">
    Список пуст
</div>
  • В первом случае элемент отображается, если объект user существует и его свойство isAdmin истинно.
  • Во втором случае блок появляется, если массив items пустой.

Динамическое обновление

Slim.js отслеживает изменения состояния и автоматически пересчитывает условие в s:if. Если значение изменяется:

  • с false на true, элемент создается и вставляется в DOM;
  • с true на false, элемент удаляется из DOM.

Это позволяет полностью отказаться от ручного управления видимостью элементов через style.display или hidden.

Сочетание с другими директивами

s:if можно комбинировать с s:for для условного рендеринга списков:

<ul>
    <li s:for="item in items" s:if="item.visible">
        {{item.name}}
    </li>
</ul>

Здесь элементы списка отображаются только если свойство visible у объекта item истинно.

Также допускается вложение s:if внутри других элементов с s:if для построения сложной логики отображения:

<div s:if="isLoggedIn">
    <div s:if="user.isAdmin">
        Панель администратора
    </div>
    <div s:if="!user.isAdmin">
        Страница пользователя
    </div>
</div>

Особенности работы

  1. Полное удаление из DOM — при ложном условии элемент не просто скрывается, он полностью удаляется. Это отличается от изменения видимости через CSS.
  2. Перерисовка при изменении состояния — Slim.js использует реактивное состояние компонентов, поэтому любые изменения значений, задействованных в s:if, автоматически отражаются на DOM.
  3. Поддержка выражений — внутри s:if допустимы любые валидные JS-выражения, включая вызовы функций компонента, логические комбинации и операции сравнения.

Примеры продвинутого использования

Условный рендеринг с функцией:

class App extends Slim {
    user = { name: 'Иван', role: 'admin' };

    isAdmin() {
        return this.user.role === 'admin';
    }
}
<div s:if="isAdmin()">
    Только для администраторов
</div>

Условный рендеринг с несколькими условиями:

<div s:if="isLoggedIn && items.length > 0">
    Список ваших предметов:
    <ul>
        <li s:for="item in items">{{item}}</li>
    </ul>
</div>

Блок отображается только если пользователь вошел в систему и список предметов не пуст.

Рекомендации по использованию

  • Использовать s:if для реального удаления элементов из DOM, а не для простой смены стилей.
  • Для списков, где часто меняется количество элементов, лучше комбинировать с s:for и проверками внутри элементов.
  • Для сложной логики рендеринга можно вынести условие в отдельный метод компонента для улучшения читаемости и поддержки.

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

Оглавление