handlebars.js - handlebars - Usando variables para una plantilla parcial

handlebars partials example

Question

Definitivamente me estoy perdiendo algo sobre la forma en que funcionan los manillares. Necesito llamar a parciales diferentes dependiendo del valor de una variable. Actualmente la única manera que he encontrado para hacerlo es esta:

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

Y en la correspondiente JS:

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

... lo que me parece extremadamente verboso. Lo que realmente me gustaría hacer es algo como:

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

En otras palabras, el valor de mode sería el nombre del parcial que se llama.

Esto parece que debe ser un caso de uso muy común, pero no puedo encontrar ningún ejemplo de esto en línea. ¿Dónde me he equivocado?

Answer 1

Los parciales se almacenan en Handlebars.partials para que pueda acceder a ellos manualmente en su propio asistente. Sin embargo, hay algunos trucos difíciles aquí:

1. El contenido de Handlebars.partials puede ser cadenas o funciones, por lo que debe compilar los parciales en el primer uso.
2. Los manillares no saben si el parcial será text/plain o text/html por lo que deberá llamar a su ayudante en {{{...}}} o {{...}} según corresponda.
3. Esto no está exactamente documentado (al menos no en cualquier lugar que pueda encontrar), por lo que tiene que aplicar ingeniería inversa a la fuente de Handlebars y buscar en la console.log(arguments) con console.log(arguments) para descubrir cómo usar Handlebars.partials .
4. Tienes que pasar this a mano cuando llamas al ayudante.

No temas, en realidad no es tan complicado. Algo tan simple como esto:

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);
});

debe hacer el truco Entonces puedes decir:

{{{partial mode this}}}

Y seguir con cosas más interesantes.

Demostración: http://jsfiddle.net/ambiguous/YwNJ3/2/

Answer 2

Actualización para 2016 : Versión 3 de manillares agregados parciales dinámicos . De los documentos:

Es posible seleccionar dinámicamente el parcial que se ejecutará usando la sintaxis de la sub expresión.

{{> (whichPartial) }}

Evaluará whichPartial y luego procesará el parcial cuyo nombre devuelve esta función.

Las subexpresiones no resuelven las variables, por lo que whichPartial debe ser una función. Si una variable simple tiene el nombre parcial, es posible resolverlo a través del asistente de lookup .

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