Синтаксис шаблонов в Slim.js

Slim.js — это лёгкая библиотека для создания компонентов на JavaScript с декларативным подходом к построению интерфейсов. Основу её работы составляют шаблоны, которые описывают структуру DOM и связывают данные с представлением. Шаблоны Slim.js используют синтаксис, напоминающий HTML, но с расширенными возможностями для реактивности и управления состоянием.

Объявление шаблона

Шаблон в Slim.js создаётся с помощью тега <template> и директивы slim-component. Например:

<template id="my-component" slim-component>
  <div>
    <h1>{{title}}</h1>
    <p>{{description}}</p>
  </div>
</template>
  • {{title}} и {{description}} — привязки данных, которые автоматически обновляют DOM при изменении соответствующих свойств компонента.
  • Атрибут slim-component указывает на то, что шаблон является компонентом Slim.js.

Привязка данных

В Slim.js используется реактивная система привязки данных. Примеры синтаксиса:

  • Интерполяция текста: {{property}} заменяется значением свойства компонента.
  • Атрибуты: <img src="{{imageUrl}}"> динамически меняет атрибут src.
  • Классы и стили: можно использовать объектные привязки:
<div class="{{{className}}}" style="{{{styleObject}}}"></div>

Тройные фигурные скобки {{{ }}} позволяют вставлять объектные значения или HTML без экранирования.

Условные конструкции

Slim.js поддерживает условное отображение через директиву slim-if:

<div slim-if="isVisible">
  <p>Элемент отображается только если isVisible === true</p>
</div>
  • Атрибут slim-if принимает булевое выражение.
  • Элемент и его содержимое автоматически добавляются или удаляются из DOM при изменении условия.

Для альтернативного ветвления используется slim-else:

<div slim-if="isLoggedIn">Привет, пользователь!</div>
<div slim-else>Пожалуйста, войдите в систему</div>

Циклы и повторяющиеся элементы

Для рендеринга массивов или коллекций используется директива slim-for:

<ul>
  <li slim-for="item in items">{{item.name}}</li>
</ul>
  • item — локальная переменная для текущего элемента массива.
  • items — свойство компонента, содержащее массив объектов.
  • Slim.js автоматически создаёт и обновляет DOM при изменении массива (push, splice, map).

Можно добавлять индекс:

<li slim-for="(item, index) in items">{{index}}. {{item.name}}</li>

Обработчики событий

Slim.js позволяет связывать события с методами компонента через синтаксис on:event:

<button on:click="handleClick">Нажми меня</button>
  • handleClick — метод, объявленный в компоненте:
class MyComponent extends Slim {
  title = "Пример";
  handleClick() {
    console.log("Кнопка нажата");
  }
}
customElements.define('my-component', MyComponent);
  • Аргументы события доступны через объект event, если метод принимает параметр.

Слоты и вложенные компоненты

Slim.js поддерживает слоты для передачи контента в компоненты:

<my-component>
  <p slim-slot="footer">Нижний колонтитул</p>
</my-component>
  • Атрибут slim-slot связывает содержимое с соответствующим местом в шаблоне компонента.
  • Внутри компонента слот определяется через <slot name="footer"></slot>.

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

Реактивные выражения

Привязки могут включать простые вычисления и условия:

<p>{{count > 0 ? 'Есть элементы' : 'Нет элементов'}}</p>
  • Выражения внутри {{}} пересчитываются при изменении зависимых свойств.
  • Поддерживаются арифметические операции, тернарные выражения и вызовы методов компонента.

Динамические атрибуты

Помимо стандартной интерполяции, Slim.js позволяет динамически управлять классами и стилями:

<div class="{{isActive ? 'active' : 'inactive'}}" style="color: {{color}};"></div>
  • Любое свойство компонента может напрямую влиять на отображение элемента.
  • Смена значений автоматически обновляет DOM без перерисовки всего компонента.

Комбинирование директив

Директивы slim-if, slim-for и обработчики событий можно комбинировать:

<ul>
  <li slim-for="item in items" slim-if="item.visible" on:click="selectItem(item)">
    {{item.name}}
  </li>
</ul>
  • Элемент отобразится только если item.visible === true.
  • При клике вызывается метод с передачей текущего элемента.
  • Slim.js обеспечивает эффективное обновление DOM и минимальные операции при изменении данных.

Итоговые особенности шаблонного синтаксиса

  • Декларативные привязки {{}} и {{{}}}.
  • Директивы slim-if, slim-else, slim-for для условной логики и циклов.
  • Обработчики событий через on:event.
  • Поддержка слотов для вложенного контента.
  • Реактивные выражения с вычислениями и тернарными операциями.
  • Динамические классы и стили через привязку к свойствам компонента.

Синтаксис шаблонов Slim.js сочетает простоту HTML с мощью реактивной системы, позволяя создавать динамические интерфейсы без громоздкого кода и прямого манипулирования DOM.

Оглавление