Передача переменных через partial в Handlebars.js

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

Для передачи переменных в шаблоны Handlebars, вам потребуется хелпер Handlebars. Вот пример создания такого хелпера на JavaScript, который позволяет добавить дополнительную переменную в текущий контекст и использовать её в вашем шаблоне Handlebars:

Handlebars.registerHelper('includeWithVar', function(extraVar, options) {
  return options.fn(Object.assign({}, this, { extraVar }));
});

Чтобы передать переменную extraVar в подключаемую часть myPartial, выполните вызов хелпера:

{{#includeWithVar myVariable}}
  {{> myPartial}}
{{/includeWithVar}}

Теперь переменная myVariable доступна в шаблоне myPartial как {{extraVar}}.

Эффективное использование частей шаблона Handlebars

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

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

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

{{> myPartial headline="Срочные новости" }}

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

<h1>{{#if headline}}{{headline}}{{else}}Заголовок по умолчанию{{/if}}</h1>

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

Объединение контекстов

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

Handlebars.registerHelper('withContext', function(context, options) {
  return options.fn(Object.assign({}, this, context));
});

Создание дочернего контекста

Вы можете изолировать часть данных, чтобы предотвратить их смешивание с основным контекстом:

let context = {
  user: {
    name: 'Джейн Доу',
    titles: {
      main: 'Генеральный директор',
      secondary: 'Основатель'
    }
  }
};

Используйте часть данных в userPartial, не передавая всего объекта пользователя.

Динамические резолверы шаблонов

Используйте кустомные хелперы для динамического выбора шаблонов:

Handlebars.registerHelper('dynamicPartial', function(name, options) {
  let templateName = Handlebars.partials[`partial_${name}`];
  return new Handlebars.SafeString(templateName(options.hash));
});

Вызовите функцию с динамическим именем и аргументами:

{{#dynamicPartial "comments" user=userObject }}

Сложные сценарии и хелперы

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

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

Представьте себе поезд(🚂), который перевозит почту(📧) из одного города в другой:

Город Handlebars (🏠): Это дом для шаблонов (📄), которые ожидают содержимого.
Город Данных (🏙️): Здесь переменные (📦) ожидают отправки.

{{> partialName }}

Это как отправка пустого вагона. Прикрепите к нему груз переменных и ощутите разницу!

{{> partialName variable=package }}

До: 🚂📄 -- Пустой поезд, пустые мечты
После: 🚂📦📄 -- Поезд с переменными, полный ожиданий.

Теперь проблема передачи данных решена.

Загрузка частей с помощью кастомного загрузчика

function loadPartial(name) {
  const template = Handlebars.templates[name];
  Handlebars.registerPartial(name, template);
}

Защита от утечек данных с помощью специального хелпера

Handlebars.registerHelper('safeString', function(text, options) {
  return new Handlebars.SafeString(text);
});

Таким образом, можно отрендерить неэкранированный HTML, однако следует помнить об возможности XSS-атак.

Контекстная обёртка для частей

{{> userPartial user=model.user }}

Теперь все переменные доступны через префикс user., что делает код более предсказуемым и понятным.

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

1. Handlebars — официальная документация.
2. Partials | Handlebars — руководство по использованию частей.
3. Submitting HTML form using Jquery AJAX – Stack Overflow — дискуссия о обработке форм.
4. Medium — статья о контексте и области видимости.
5. A Beginner's Guide to Handlebars — SitePoint — как передавать переменные в частицы.
6. Handlebars Tutorial – YouTube — видеоурок о продвинутых возможностях Handlebars.
7. JSFiddle − О проекте — демонстрация кода с контекстуальными переменными в Handlebars.