Обращение к внешней переменной в loop Handlebars.js

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

Чтобы обратиться к переменной из внешней области видимости внутри цикла Handlebars.js {{#each}}, следует воспользоваться конструкцией {{../yourVariable}}. С её помощью можно обратиться к переменной yourVariable, находящейся в окружающем контексте.

Пример использования:

{{#each array}}
  // Элемент массива
  В цикле: {{this}}
  // Переменная из внешней области видимости
  Вне цикла: {{../externalVar}}
{{/each}}

В данном фрагменте кода {{this}} выводит текущий элемент массива, а {{../externalVar}} обращается к переменной externalVar, находящейся за пределами цикла.

Доступ к корню контекста в сложных вложенных сценариях

При работе с вложенными циклами может возникнуть потребность обратиться к переменным из верхних уровней контекста. Для этого используйте {{@root.yourVariable}}, чтобы обратиться к переменной yourVariable, находящейся на корневом уровне контекста, не учитывая степень вложенности.

Пример:

{{#each topLevel}}
  {{#each secondLevel}}
    // Обращение к переменной на корневом уровне
    Корневая переменная: {{@root.externalVar}}
  {{/each}}
{{/each}}

Выражение {{@root.externalVar}} выводит значение переменной externalVar из корневого контекста.

Сохранение контекста: избегайте использования стрелочных функций

При регистрации вспомогательных функций следует отдавать предпочтение обычным функциональным выражениям, а не стрелочным функциям, чтобы сохранить корректный контекст this.

Правильно:

Handlebars.registerHelper('myHelper', function() {
  // 'this' ссылается на текущий контекст
  return this.externalVar;
});

Неправильно:

Handlebars.registerHelper('myHelper', () => {
  // 'this' может не соответствовать ожидаемому контексту
  return this.externalVar;
});

Исследование вложенных объектов с помощью #each и #with

При работе с вложенными объектами удобно комбинировать помощники #each и #with для получения доступа к нужным данным.

Пример:

{{#each person}}
  {{#with address}}
    // Обращение к данным из родительского контекста
    {{../personName}} проживает в {{city}}
  {{/with}}
{{/each}}

С помощью {{../personName}}, происходит обращение к родительскому контексту объекта person, чтобы получить данные о personName.

Пути: следите за точностью

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

Смена контекста: следите за изменениями

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

Важно:

{{#let newContext=someValue}}
  // Ожидается 'externalVar', а возвращается 'newContext'
  {{../externalVar}}
{{/let}}

Будьте в курсе: синтаксис и применение

Уделите внимание изменению синтаксиса цепочек доступа (../) в Handlebars 4 и выше версиях. Следите за обновлениями официальной документации, чтобы использовать актуальные способы доступа к родительским контекстам.

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

Можно представить работу в цикле {{#each}} как игру с пузырьками (🔵🔵🔵). Будучи внутри цикла, мы находимся внутри одного из пузырьков (🔵). Чтобы перейти на другой уровень, нужно "лопнуть" этот пузырёк (💥).

А как достичь переменных, находящихся за пределами цикла? Используем "иглу" (📌).

Символ ../ выступает в роли "иглы" (📌) для доступа к внешним переменным.

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

1. Встроенные помощники | Handlebars — официальная документация о встроенных помощниках функции each в Handlebars.js.
2. Понимание области видимости в JavaScript | DigitalOcean — статья, раскрывающая основы области видимости в JavaScript.
3. Замыкания – JavaScript | MDN — подробный обзор замыканий в JavaScript на MDN Web Docs.
4. Область видимости и подъём переменных в JavaScript | DigitalOcean — статья о переменных, области видимости и подъёме переменных от DigitalOcean.
5. Инлайн JavaScript в шаблонах Handlebars — урок о том, как вставлять код JavaScript непосредственно в шаблоны Handlebars.
6. Функции высшего порядка :: Изысканный JavaScript — глава из книги "Изысканный JavaScript", посвящённая функциям высшего порядка.