Выражения

Выражения Handlebars являются основной единицей шаблона Handlebars. Вы можете использовать их самостоятельно в {{mustache}}, передавать их в помощник Handlebars или использовать их в качестве значений в аргументах хеша.

Основное использование

Самое простое выражение Handlebars — это простой идентификатор:

<h1>{{title}}</h1>

Это выражение означает «поиск свойства title в текущем контексте». Помощники блоков могут манипулировать текущим контекстом, но не изменяют основного значения выражения.

На самом деле, это означает «поиск помощника с именем title, а затем выполнение вышеперечисленного», но мы к этому скоро перейдём.

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

<h1>{{article.title}}</h1>

Это выражение означает «поиск свойства article в текущем контексте. Затем поиск свойства title в результате».

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

<h1>{{article/title}}</h1>

Идентификаторы могут быть любым символом Юникода, кроме следующих:

Пробелы ! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~

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

{{#each articles.[10].[#comments]}}
  <h1>{{subject}}</h1>
  <div>
    {{body}}
  </div>
{{/each}}

В приведенном выше примере шаблон будет обрабатывать параметр each примерно так же, как этот javascript: articles[10]['#comments']

Вы не можете включать закрывающую ] в литерале пути, но все остальные символы допустимы.

Строки в стиле JavaScript, " и ', также могут использоваться вместо пар [.

Handlebars экранирует значения, возвращаемые {{expression}}. Если вы не хотите, чтобы Handlebars экранировал значение, используйте «тройной стэш», {{{

{{{foo}}}

Помощники

Вызов помощника Handlebars — это простой идентификатор, за которым следуют ноль или более параметров (разделенных пробелом). Каждый параметр — это выражение Handlebars.

{{{link story}}}

В этом случае link — это имя помощника Handlebars, а story — параметр для помощника. Handlebars оценивает параметры точно так же, как описано выше в разделе «Основное использование».

Handlebars.registerHelper('link', function(object) {
  var url = Handlebars.escapeExpression(object.url),
      text = Handlebars.escapeExpression(object.text);

  return new Handlebars.SafeString(
    "<a href='" + url + "'>" + text + "</a>"
  );
});

При возвращении HTML из помощника вы должны вернуть Handlebars SafeString, если вы не хотите, чтобы он был экранирован по умолчанию. При использовании SafeString все неизвестные или небезопасные данные должны быть вручную экранированы с помощью метода escapeExpression.

Вы также можете передать простую строку, число или логическое значение в качестве параметра помощникам Handlebars.

{{{link "See more..." story.url}}}

В этом случае Handlebars передаст помощнику link два параметра: строку "See more..." и результат оценки story.url в текущем контексте.

Handlebars.registerHelper('link', function(text, url) {
  url = Handlebars.escapeExpression(url);
  text = Handlebars.escapeExpression(text);

  return new Handlebars.SafeString(
    "<a href='" + url + "'>" + text + "</a>"
  );
});

Вы можете использовать тот же помощник с динамическим текстом, основанным на значении story.text:

{{{link story.text story.url}}}

Помощники Handlebars также могут получать необязательный набор пар ключ-значение в качестве последнего параметра (в документации они называются аргументами хеша):

{{{link "See more..." href=story.url class="story"}}}

Ключи в аргументах хеша должны быть простыми идентификаторами, а значения — выражениями Handlebars. Это означает, что значения могут быть простыми идентификаторами, путями или строками.

Handlebars.registerHelper('link', function(text, options) {
  var attrs = [];

  for (var prop in options.hash) {
    attrs.push(
        Handlebars.escapeExpression(prop) + '="'
        + Handlebars.escapeExpression(options.hash[prop]) + '"');
  }

  return new Handlebars.SafeString(
    "<a " + attrs.join(" ") + ">" + Handlebars.escapeExpression(text) + "</a>"
  );
});

Handlebars предоставляет дополнительную метаинформацию, такую как аргументы хеша, помощникам в качестве последнего параметра.

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

Подробнее: Помощники блоков

Подвыражения

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

{{outer-helper (inner-helper 'abc') 'def'}}

В этом случае inner-helper будет вызван со строковым аргументом 'abc', а то, что вернёт функция inner-helper, будет передано в качестве первого аргумента outer-helper (и 'def' будет передано как второй аргумент outer-helper).

Управление пробелами

Пробелы шаблона могут быть опущены с любой стороны от оператора фигурной скобки, добавив символ ~ внутри фигурных скобок. При применении все пробелы с этой стороны будут удалены до первой встречающейся команды Handlebars или символа, отличного от пробела.

{{#each nav ~}}
  <a href="{{url}}">
    {{~#if test}}
      {{~title}}
    {{~^~}}
      Empty
    {{~/if~}}
  </a>
{{~/each}}

с таким контекстом:

{
  nav: [
    {url: 'foo', test: true, title: 'bar'},
    {url: 'bar'}
  ]
}

приводит к выводу без символов новой строки и пробелов форматирования:

<a href="foo">bar</a><a href="bar">Empty</a>

Это расширяет стандартное поведение удаления строк, которые являются «самостоятельными» помощниками (только помощник блока, комментарий или частичный фрагмент и пробелы).

{{#each nav}}
  <a href="{{url}}">
    {{#if test}}
      {{title}}
    {{^}}
      Empty
    {{/if}}
  </a>
{{~/each}}

будет отображаться

<a href="foo">
    bar
</a>
<a href="bar">
    Empty
</a>

Экранирование

Содержимое Handlebars может быть экранировано двумя способами: встроенное экранирование или помощники блоков raw. Встроенное экранирование создается путём добавления префикса \ к блоку фигурной скобки. Сырые блоки создаются с помощью {{{{ фигурных скобок.

\{{escaped}}
{{{{raw}}}}
  {{escaped}}
{{{{/raw}}}}

Сырые блоки работают аналогично другим помощникам блоков с отличием, что содержимое дочернего элемента обрабатывается как строка.