Синтаксис шаблонов и выражения

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

Интерполяция данных

Riot использует двойные фигурные скобки {{ }} для вставки значений переменных прямо в HTML. Это позволяет динамически отображать данные компонента.

<p>{{ message }}</p>

В этом примере значение переменной message автоматически отображается в абзаце. При изменении message интерфейс обновляется реактивно.

Ключевые моменты:

  • Поддерживаются любые JavaScript-выражения внутри скобок.
  • Можно использовать тернарные операторы, арифметические операции, вызовы функций и методы объекта.
<p>{{ isActive ? 'Активен' : 'Не активен' }}</p>
<p>{{ user.name.toUpperCase() }}</p>

Условные выражения

Riot.js предоставляет директиву if для условного рендеринга элементов. Она может использоваться как атрибут компонента или как блок внутри шаблона.

<div if={showMessage}>
  <p>{{ message }}</p>
</div>

Альтернатива с else позволяет обрабатывать противоположный случай:

<div if={showMessage}>
  <p>{{ message }}</p>
</div>
<div else>
  <p>Сообщение скрыто</p>
</div>

Особенности:

  • Условие вычисляется каждый раз при обновлении реактивных данных.
  • Удобно комбинировать с each для фильтрации элементов списка.

Итерации с each

Для динамического отображения массивов используется директива each. Она позволяет проходить по каждому элементу коллекции и создавать повторяющиеся блоки.

<ul>
  <li each={item, index in items}>
    {{ index }}: {{ item.name }}
  </li>
</ul>

Разбор параметров:

  • item — текущий элемент массива.
  • index — индекс элемента.
  • items — массив данных компонента.

each поддерживает вложенные итерации, что позволяет строить сложные структуры списков и таблиц.

События и выражения

Riot.js связывает события с методами компонента через атрибут on:event. Выражение может быть как вызовом метода, так и произвольным кодом JavaScript.

<button oncl ick={handleClick}>Нажми меня</button>

Метод handleClick определяется внутри скриптовой части компонента:

this.handleClick = () => {
  this.message = 'Кнопка нажата!';
}

Важные особенности:

  • Любое изменение реактивной переменной автоматически обновляет шаблон.
  • Внутри выражений допустимы вызовы функций, условные операторы и математические вычисления.
<button oncl ick={() => counter += 1}>Увеличить: {{ counter }}</button>

Атрибуты и биндинг

Riot позволяет динамически устанавливать значения HTML-атрибутов с помощью фигурных скобок. Это называется attribute binding.

<img src={user.avatar} alt={user.name}>
<input type="text" value={inputValue}>

Для классов и стилей существуют специальные возможности:

  • class={isActive ? 'active' : ''}
  • style="color: {textColor}; font-size: {fontSize}px"

Такой подход упрощает работу с динамическими стилями и CSS-классами.

Встроенные выражения и фильтры

Выражения в Riot можно комбинировать с встроенными фильтрами и методами массива. Например, сортировка или фильтрация массива прямо в шаблоне:

<ul>
  <li each={user in users.filter(u => u.active)}>
    {{ user.name }}
  </li>
</ul>

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

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

Локальные и глобальные данные

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

<user-card name={userName} age={userAge}></user-card>

Внутри компонента user-card:

<p>{{ opts.name }} — {{ opts.age }} лет</p>
  • opts содержит все переданные свойства.
  • Реактивные изменения локальных переменных обновляют шаблон автоматически.

Заключение по синтаксису

Синтаксис шаблонов в Riot.js строится вокруг реактивной интерполяции данных, условных выражений, итераций и событий. Ключевые элементы включают:

  • {{ }} для выражений;
  • if и else для условий;
  • each для массивов;
  • on:event для событий;
  • динамические атрибуты и биндинги.

Такой подход обеспечивает компактный и мощный способ связывать данные и пользовательский интерфейс, минимизируя необходимость в отдельной логике для DOM-обновлений.

Оглавление