Циклы и итерация по массивам

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

Директива each для перебора массивов

В Slim.js ключевым инструментом для работы с массивами в шаблоне является директива each. Она позволяет динамически генерировать элементы DOM на основе элементов массива.

Синтаксис:

<div each="item in items">
  <span>{item.name}</span>
</div>
  • each="item in items" — указывает на массив items и текущий элемент item.
  • Внутри блока доступно любое свойство элемента массива.
  • Любые изменения массива автоматически отражаются в DOM: добавление, удаление или изменение элементов.

Реактивное обновление массивов

Slim.js отслеживает изменения массивов с помощью прокси-объектов. Методы, изменяющие массив, такие как push, pop, splice, shift, unshift, автоматически обновляют отображение в шаблоне.

class TodoList extends Slim {
  items = [
    { name: "Купить продукты" },
    { name: "Прочитать книгу" }
  ];

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

  removeItem(index) {
    this.items.splice(index, 1);
  }
}

Шаблон для этого компонента:

<ul>
  <li each="task in items">
    {task.name}
    <button click="removeItem(index)">Удалить</button>
  </li>
</ul>
  • index — встроенная переменная, доступная в каждом цикле each.
  • Любое изменение массива (push, splice) автоматически обновляет DOM без ручного вмешательства.

Использование индекса и ключей

Для оптимизации производительности и корректного обновления элементов рекомендуется использовать ключи. Ключи помогают библиотеке Slim.js точно идентифицировать элементы при изменении массива.

<li each="task, i in items" key="{task.id}">
  {task.name}
</li>
  • task, i in items — второй параметр i предоставляет индекс элемента.
  • key="{task.id}" — уникальный идентификатор элемента массива. При изменении массива Slim.js будет использовать ключ для минимизации пересоздания DOM-узлов.

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

Slim.js позволяет создавать вложенные циклы для работы с массивами объектов с вложенными массивами.

<div each="user in users">
  <h3>{user.name}</h3>
  <ul>
    <li each="task in user.tasks">{task.title}</li>
  </ul>
</div>
  • Изменение вложенного массива tasks каждого пользователя автоматически отражается в DOM.
  • Вложенные циклы можно комбинировать с условными директивами if, создавая гибкую реактивную логику отображения.

Итерация и методы массива в скриптах компонента

Помимо шаблонных циклов each, массивы в Slim.js можно обрабатывать обычными методами JavaScript, сохраняя реактивность.

updateTaskName(index, newName) {
  this.items[index].name = newName;
  this.items = [...this.items]; // Важно, чтобы Slim.js увидел изменение массива
}
  • Прямое присвоение нового значения элементу массива не всегда вызывает обновление шаблона.
  • Использование метода копирования массива ([...]) или методов типа map гарантирует реактивное обновление.
this.items = this.items.map(item =>
  item.id === updatedId ? { ...item, name: updatedName } : item
);

Итерация с фильтрацией и сортировкой

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

get completedTasks() {
  return this.items.filter(task => task.completed);
}

Шаблон:

<li each="task in completedTasks">{task.name}</li>
  • Вычисляемое свойство пересчитывается при любом изменении массива items.
  • Это позволяет отделять логику фильтрации от отображения, сохраняя компонент чистым и реактивным.

Практические советы

  • Для больших массивов использовать key обязательно, иначе при обновлении списка будут пересоздаваться все DOM-элементы, что снижает производительность.
  • Вложенные циклы и динамические изменения массивов лучше оформлять через вычисляемые свойства для предсказуемого поведения.
  • Любое изменение массива должно быть реактивным: либо через встроенные методы (push, splice), либо через присвоение нового массива.

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

Оглавление