Доступ к элементу массива по индексу в handlebars.js

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

Для доступа к элементу массива по индексу в Handlebars используйте хелпер lookup:

{{lookup array index}}

Здесь array — это название вашего массива, index — индекс элемента. Например:

{{!-- Обращение к 'banana' в массиве ['apple', 'banana', 'carrot'] --}}
{{lookup fruits 1}}

Таким образом, мы получим 'banana', так как индексация начинается с 0.

Прямой доступ к элементу массива с использованием точечной нотации

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

{{people.1.name}}

Здесь 1 — индекс элемента в массиве people, .name — свойство этого элемента.

Создание собственных хелперов для продвинутого использования

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

Handlebars.registerHelper('getAtIndex', function (array, index) {
  return array[index];
});

Теперь вы можете использовать его для обращения к элементу массива people:

{{getAtIndex people 2}}

Динамический доступ к элементу массива с помощью хелпера lookup

Если вы хотите обратиться к элементу массива динамически, используйте хелпер lookup:

{{lookup people someDynamicIndex}}

Здесь someDynamicIndex — это переменная, хранящая нужный индекс.

Доступ к элементам массива с помощью @index и #each

Для обращения к элементам массива последовательно используйте @index в паре с блочным хелпером #each:

{{#each people}}
  Персона {{this}} занимает {{@index}} позицию.
{{/each}}

Использование квадратных скобок для указания индекса

Например, так:

{{#with (lookup people 1)}}
  {{name}} живет в квартире под номером {{@../index}}.
{{/with}}

Такая запись обращает контекст к второму элементу в массиве people.

Обратите внимание на тип индекса

Handlebars требует четкого соответствия типов, поэтому если ожидается число, а передается строка, стоит использовать хелпер:

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

Теперь мы можем использовать строковую переменную для обращения к элементу массива:

{{lookup people (concatIndex someDynamicIndex)}}

Использование выражений в качестве аргументов

В Handlebars допускается использование выражений в качестве аргументов:

{{lookup (lookup people 1) 'address.street'}}

Таким образом, можно получить адрес по улице.

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

Доступ к элементам массива в Handlebars можно представить, как выбор сладости из набора:

🍫 🍬 🍭 🍦 🍮 🍩 🎂
  0    1   2   3   4   5   6

Используя индекс, вы можете выбрать нужную сладость:

{{candy.[3]}} // Я выбираю это 🍦!

Лучшие практики для работы с Handlebars

В рамках работы с Handlebars следует придерживаться определённых важных правил:

• Сохраняйте выражения простыми. Сложную логику взаимодействия с массивами лучше выносить в отдельные хелперы.

• Используйте явное указание индексов с осторожностью. Синтаксис вида {{people.John}} может быть соблазнительным, но не всегда подходит по смыслу.

• Учитывайте различия в версиях Handlebars. Обновления могут вносить изменения в синтаксис.

• Используйте опыт сообщества для решения задач. На форумах можно найти множество реализаций аналогичных задач, которые могут пригодиться.

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

1. Введение в Handlebars — официальное руководство.
2. Перебор массивов в handlebars.js на Stack Overflow.
3. Встроенные хелперы Handlebars — руководство.
4. Пользовательские хелперы в Handlebars — подробное описание создания собственных хелперов.
5. Обсуждение проблемы с хелпером switch в handlebars.js на GitHub.
6. Руководство для начинающих по Handlebars на сайте Sitepoint.
7. Видеоурок по Handlebars на YouTube.