2013-08-25 3 views
14

Мне определенно ничего не известно о том, как работает 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

Официальная ** динамическая партитура ** (от Joshua) действительно должна быть ответом по умолчанию здесь. – mikemaccana

ответ

17

Частицы хранятся в 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/

+1

Спасибо, что указали это! Как вы говорите, официальные документы ДЕЙСТВИТЕЛЬНО плохо, когда речь идет о частичных. – Fractalf

+2

@Fractalf: Я слышу вас, официальные «документы» оставляют желать лучшего, мне приходилось проходить через исходный код несколько раз, чтобы понять, что происходит. –

+0

, если вам нужна версия на стороне сервера, вы можете найти его здесь http://stackoverflow.com/a/27820812/1563880 – nktssh

10

Обновление для 2016: Version 3 of handlebars addedDynamic Partials. Из документов:

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

{{> (whichPartial) }} 

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

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

{{> (lookup . 'myVariable') }} 
Смежные вопросы