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

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

<template name="base">
  {{#if a}}{{> a}}{{/if}}
  {{#if b}}{{> b}}{{/if}}
  {{#if c}}{{> c}}{{/if}}
</template>

И в соответствующем JS:

Template.base.a = function () {
  return (mode === "a");
}

Template.base.b = function () {
  return (mode === "b");
}

Template.base.c = function () {
  return (mode === "c");
}

..., который поражает меня как чрезвычайно многословную. То, что я действительно хотел бы сделать, это что-то вроде:

<template name="base">
  {{> {{mode}} }}
</template>

Другими словами, значение mode будет именем вызываемого частица.

Кажется, что это очень распространенный случай использования, но я не могу найти примеров этого онлайн. Где я ошибся?

Ответы

Ответ 1

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

  • Содержимое Handlebars.partials может быть строками или функциями, поэтому вам необходимо скомпилировать частичные файлы при первом использовании.
  • Handlebars не знает, будет ли частичный text/plain или text/html, поэтому вам нужно будет вызвать своего помощника в {{{...}}} или {{...}}, если это необходимо.
  • Этот материал не точно документирован (по крайней мере, не где-нибудь, что я могу найти), поэтому вам нужно перестроить источник Handlebars и поработать с помощью console.log(arguments), чтобы выяснить, как использовать Handlebars.partials.
  • Вы должны передать this вручную, когда вы вызываете помощника.

Не бойтесь, это не так уж сложно. Что-то простое:

Handlebars.registerHelper('partial', function(name, ctx, hash) {
    var ps = Handlebars.partials;
    if(typeof ps[name] !== 'function')
        ps[name] = Handlebars.compile(ps[name]);
    return ps[name](ctx, hash);
});

должен сделать трюк. Тогда вы можете сказать:

{{{partial mode this}}}

и займитесь более интересными вещами.

Демо: http://jsfiddle.net/ambiguous/YwNJ3/2/

Ответ 2

Обновление для 2016: Добавлена ​​версия 3 рулей Динамические частицы. Из документов:

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

{{> (whichPartial) }}

Будет оценивать whichPartial, а затем отобразить частичное имя которого возвращается этой функцией.

Подвыражения не разрешают переменные, поэтому whichPartial должна быть функцией. Если простая переменная имеет частичное имя, ее можно разрешить с помощью помощника lookup.

 {{> (lookup . 'myVariable') }}