Получение индекса итерации в Handlebars each helper

Быстрый ответ

Для того чтобы получить индекс при использовании хелпера {{#each}} в Handlebars, необходимо использовать переменную @index:

{{#each items}}
  <p>{{@index}} – {{this}}</p>
{{/each}}

Данный код создаст упорядоченный список, в котором каждый элемент будет обернут в тег <p>, сопровождаемый индексом и значением.

Ключевые понятия: индексы и ключи

• Обращение к индексу: Используйте {{@index}}, чтобы обратиться к текущему индексу массива в хелпере {{#each}}.
• Обращение к ключу: Для работы с ключами свойств объекта используйте {{@key}}.
• Обращение к родительскому элементу: Используйте {{@../index}} или {{@../key}}, чтобы получить индекс или ключ родительского элемента.
• Синтаксис по умолчанию для индекса: В третьей версии Handlebars появилась возможность объявлять индекс вторым параметром хелпера {{#each}}.

Визуализация

При итерации через массив с помощью {{#each}} в Handlebars, индекс становится вашей навигационной картой:

{{#each array}}
  {{@index}} – 🧩 Часть {{this}}
{{/each}}

Это можно изобразить примерно так:

🎞️ 0: [🧩 Часть A]
🎞️ 1: [🧩 Часть B]
🎞️ 2: [🧩 Часть C]

Handlebars красноречиво демонстрирует навигацию по набору данных. 🎞

Продвинутое использование: возможности Handlebars

Приветствуем Handlebars 3.0

В Handlebars версии 3.0 и выше вы можете явно указать индекс в качестве второго параметра в хелпере {{#each}}:

{{#each array as |value index|}}
  {{index}} — {{value}}
{{/each}}

Подробнее об этом расскажет наш спикер на видео

Расширение возможностей индекса с помощью пользовательского хелпера Math

Если требуется, чтобы индексация начиналась не с 0, можно расширить Handlebars пользовательским хелпером incrementedIndex:

Handlebars.registerHelper('incrementedIndex', function (index) {
  return index + 1;
});

Теперь вы можете использовать этот новый хелпер в шаблоне:

{{#each items}}
  <p>{{incrementedIndex @index}} – {{this}}</p>
{{/each}}

Проверка на пустые массивы

Не забывайте проводить проверку на пустые массивы в ваших пользовательских хелперах чтобы обеспечить корректное поведение.

Использование индексов во вложенных циклах

В вложенных структурах обращение к родительскому индексу или ключу становится критично:

{{#each outerArray}}
  {{#each innerArray}}
    <div>Родительский индекс: {{@../index}}, дочерний индекс: {{@index}}</div>
  {{/each}}
{{/each}}

Работа с объектами: использование {{@key}}

Такие же подходы можно использовать для доступа к индексам объектов:

{{#each object}}
  Ключ: {{@key}}, Значение: {{this}}
{{/each}}

Использование индексов в таблицах

Индексы в таблице данных могут быть представлены следующим образом:

<table>
{{#each items}}
  <tr><td>{{@index}}</td><td>{{this}}</td></tr>
{{/each}}
</table>

Пользовательские хелперы для обновленной индексации

При обновлении Handlebars или Ember, которые требуют нового подхода к индексации, создание пользовательских хелперов может стать решением:

Handlebars.registerHelper('indexOffset', function (index) {
  return index + customOffset; // где customOffset — произвольный сдвиг.
});

Альтернативные методы обращения к индексу

В некоторых контекстах иногда приходится использовать {{_view.contentIndex}}, чтобы обратиться к индексу.

Полезные материалы

1. Встроенные хелперы | Handlebars — Официальная документация по хелперу 'each' в Handlebars.
2. Проблемы · handlebars-lang/handlebars.js · GitHub — Обсуждения и вопросы, связанные с Handlebars.js, в частности хелпер 'each'.
3. Циклы и итерации – JavaScript | MDN — Подробная информация о циклах и итерациях в JavaScript.
4. Учебник по Handlebars – YouTube — Видеоурок по Handlebars для тех, кто предпочитает практическое обучение.
5. Как получить индекс родителя во вложенном хелпере each в Handlebars.js – Stack Overflow — Обсуждение на Stack Overflow о возможностях доступа к родительскому индексу во вложенных циклах с использованием Handlebars.