Параметры директив

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

Синтаксис параметров

Параметры директив задаются непосредственно в атрибутах HTML-элементов и могут быть выражениями JavaScript. Синтаксис выглядит следующим образом:

<div s:if="showElement" s:class="{ active: isActive }">
  Контент
</div>

Здесь s:if и s:class — это директивы, а значения в кавычках — параметры. Основные правила:

  • Параметр может быть булевым, строковым, числовым или объектом.
  • Для сложных логических выражений допускается использование скобок и операторов JavaScript.
  • Параметры могут быть реактивными, то есть изменять DOM автоматически при изменении соответствующих свойств компонента.

Типы параметров

  1. Булевыe параметры Используются для включения или отключения функциональности. Например, директива s:if принимает булевое значение:
<p s:if="isVisible">Видимый текст</p>

Если isVisible становится false, элемент автоматически удаляется из DOM.

  1. Строковые и числовые параметры Применяются для установки атрибутов или контента. Директива s:text позволяет динамически менять текст:
<span s:text="userName"></span>

Значение userName подставляется в текст элемента и обновляется при изменении свойства.

  1. Объектные параметры Позволяют задавать сложные правила для стилей, классов и событий. Например, директива s:class может принимать объект с ключами — именами классов, а значениями — условия включения:
<div s:class="{ active: isActive, hidden: !isVisible }"></div>

Здесь класс active добавляется только если isActive истинно, а hidden — если isVisible ложно.

  1. Функции и обработчики событий Параметры директив могут быть функциями для обработки событий:
<button s:on:click="incrementCount">Нажми меня</button>

Функция incrementCount вызывается при клике на кнопку. Аналогично, можно использовать стрелочные функции и вызовы с аргументами:

<button s:on:click="() => addItem(item)">Добавить</button>

Динамическая привязка параметров

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

<div s:if="items.length > 0" s:class="{ 'has-items': items.length > 0 }">
  Список элементов присутствует
</div>

В этом примере проверка items.length > 0 одновременно управляет видимостью элемента и классом has-items. Любое изменение массива items автоматически обновляет DOM.

Использование вычисляемых выражений

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

<p s:text="`Привет, ${user.firstName} ${user.lastName}`"></p>

Строка обновляется автоматически при изменении любого из полей объекта user.

Передача нескольких параметров

Некоторые директивы поддерживают передачу сразу нескольких параметров в виде объекта:

<input s:bind="{ value: userInput, placeholder: 'Введите текст', disabled: isReadonly }">

Здесь s:bind объединяет несколько свойств в одной директиве, управляя состоянием элемента комплексно.

Параметры по умолчанию

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

Slim.tag('my-component', class extends Slim {
  constructor() {
    super();
    this.showMessage = true; // параметр по умолчанию для s:if
  }
});
<p s:if="showMessage">Сообщение отображается по умолчанию</p>

Взаимодействие с родительскими параметрами

Директивы могут получать параметры из родительских компонентов через реактивные свойства, что упрощает построение иерархий компонентов:

<parent-component>
  <child-component s:prop:count="parentCount"></child-component>
</parent-component>

child-component получает значение parentCount как параметр count, что позволяет использовать его внутри дочернего компонента в директивах.

Резюме

Параметры директив Slim.js обеспечивают гибкую реактивность и позволяют управлять отображением, стилями, атрибутами и событиями элементов напрямую в HTML. Их мощь заключается в поддержке реактивных выражений, объектов и функций, что сокращает необходимость в шаблонном или императивном коде и делает компоненты компактными, но функциональными.

Оглавление