Доступ к элементу массива по индексу в 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. Обновления могут вносить изменения в синтаксис.
Используйте опыт сообщества для решения задач. На форумах можно найти множество реализаций аналогичных задач, которые могут пригодиться.
Полезные материалы
- Введение в Handlebars — официальное руководство.
- Перебор массивов в handlebars.js на Stack Overflow.
- Встроенные хелперы Handlebars — руководство.
- Пользовательские хелперы в Handlebars — подробное описание создания собственных хелперов.
- Обсуждение проблемы с хелпером
switch
в handlebars.js на GitHub. - Руководство для начинающих по Handlebars на сайте Sitepoint.
- Видеоурок по Handlebars на YouTube.