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

Я определенно скучаю по тому, как работает 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 будет именем части, которая называется.

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

2 ответа

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

  1. Содержание Handlebars.partials Это могут быть строки или функции, поэтому вы должны компилировать партиалы при первом использовании.
  2. Руль не знает, будет ли частичное text/plain или же text/html так что вам нужно позвонить вашему помощнику в {{{...}}} или же {{...}} по мере необходимости.
  3. Этот материал не совсем задокументирован (по крайней мере, нигде, где я могу найти), поэтому вам придется перепроектировать источник Handlebars и возиться с console.log(arguments) выяснить, как использовать Handlebars.partials,
  4. Вы должны пройти 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/

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

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

{{> (whichPartial) }}

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

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

 {{> (lookup . 'myVariable') }}
Другие вопросы по тегам