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

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

Основы синтаксиса

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

item — локальная переменная, представляющая текущий элемент массива.
items — реактивный массив в компоненте.
Тело тега <li> будет клонироваться для каждого элемента массива, автоматически обновляясь при изменении items.

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

Поддерживается любой тип коллекции: массивы, объекты (перебор ключей и значений через key, value in object).
Внутри блока s:foreach можно использовать любые Slim.js выражения, включая фильтры и методы компонента.
Каждое повторение имеет собственный контекст, что предотвращает конфликт переменных с внешним кодом.

Индекс и ключи

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

<ul>
  <li s:foreach="(item, index) in items">
    {index}: {item.name}
  </li>
</ul>

index — порядковый номер элемента в массиве.
Для объектов вместо индекса доступен key:

<ul>
  <li s:foreach="(value, key) in userRoles">
    {key} → {value}
  </li>
</ul>

Использование ключей важно для поддержания стабильности DOM при динамическом обновлении данных.

Реактивность

S:foreach тесно интегрирован с реактивной системой Slim.js. Изменения в массиве автоматически отражаются на DOM без необходимости ручного перерисовывания:

Добавление элементов через методы push, unshift или splice мгновенно создаёт новые DOM-узлы.
Удаление элементов автоматически удаляет соответствующие элементы из DOM.
Изменение элементов (например, изменение свойства объекта в массиве) обновляет только соответствующую часть шаблона.

Пример динамического обновления:

export default class MyComponent extends Slim {
  items = [{ name: 'Apple' }, { name: 'Banana' }];

  addItem() {
    this.items.push({ name: 'Cherry' });
  }
}

При вызове addItem() список <ul> автоматически расширится новым элементом без перезагрузки всего списка.

Вложенные циклы

s:foreach поддерживает вложенные циклы, что позволяет создавать сложные структуры, например таблицы или иерархические списки:

<ul>
  <li s:foreach="category in categories">
    {category.name}
    <ul>
      <li s:foreach="item in category.items">
        {item.name}
      </li>
    </ul>
  </li>
</ul>

Каждый вложенный цикл полностью независим, поддерживает собственный индекс и реактивность.

Работа с ключами для оптимизации

Для массивов объектов желательно использовать директиву s:key, чтобы Slim.js мог точно отслеживать изменения и не пересоздавать DOM без необходимости:

<ul>
  <li s:foreach="item in items" s:key="item.id">
    {item.name}
  </li>
</ul>

s:key принимает уникальный идентификатор элемента.
Это особенно важно при частых изменениях массива, предотвращает потерю состояния дочерних компонентов и ускоряет рендеринг.

Использование с компонентами

Директива s:foreach легко интегрируется с пользовательскими компонентами:

<user-card s:foreach="user in users" s:key="user.id" user="{user}"></user-card>

Каждый элемент массива users передаётся в отдельный компонент user-card.
Изменения в массиве автоматически обновляют соответствующие компоненты.
Поддерживаются свойства и события компонентов внутри цикла.

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

Можно комбинировать s:foreach с условными выражениями для фильтрации данных:

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

s:if применяется к каждому элементу цикла.
Элементы, не удовлетворяющие условию, не рендерятся.
При изменении свойства item.active DOM обновляется автоматически.