2012-07-23 16 views
9

Hola chicos!Plantillas de representación dentro de los ayudantes en el manillar

Porque parece que no hay respuesta en esto: Passing variables through handlebars partial todavía, estoy trabajando en una pequeña solución para hacer este trabajo. Entonces, la idea es registrar una función auxiliar que rinde una plantilla específica con valores posibles. Un código de bit lo hace mejor para entender.

Así es como un yo invoco el que me ayuda

<div> 
    {{myHelper}} 
</div> 

Esta ayuda se ha registrado en este pequeño código:

hbs.registerHelper(name, function (args) { 
    args = args || {}; 
    var template = hbs.compile(fs.readFileSync(__dirname + '/' + file, 'utf8')); 
    return template(args); 
}); 

pongo este snippiet en un bucle para registrar diferentes ayudantes en una vez. Esto significa que se da 'nombre' y 'archivo'.

Bueno, ahora soy capaz de hacer algo como esto:

// 'values' could be something like this: 

var values = { headline: 'HEADLINE' } 

<div> 
    {{myHelper values}} 
</div> 

Dentro de un ayudante ahora puedo comprobar si se le da un ciertos valores:

// myHelper template 

<div> 
    {{#if headline}} 
    <h1>{{headline}}</h1> 
    {{/if}} 
    <p>Lorem ipsum</p> 
</div> 

Esta pequeña solución funciona para mí , Pero hay un problema. Al registrar un helper como se explicó anteriormente, se devuelve una cadena escapada de HTML simple. Por lo tanto, invocar a un ayudante no genera un fragmento de HTML renderizado. Muestra el HTML como una cadena escapada.

¿Alguien de ustedes tiene una idea de cómo puedo hacer que mi fragmento de código devuelve el HTML como HTML?

/Pascal

Respuesta

20

De Handlebars doc:

manillares no escapará a un Handlebars.SafeString. Si escribe un helper que genere su propio HTML, por lo general, desea devolver un nuevo Handlebars.SafeString (resultado). En tal circunstancia , querrá escanear parámetros manualmente.

Try

hbs.registerHelper(name, function (args) { 
    args = args || {}; 
    var template = hbs.compile(fs.readFileSync(__dirname + '/' + file, 'utf8')); 

    // return new hbs.SafeString(template(args)); 
    // From @Maroshii 
    // the SafeString method must be accessed through hbs.handlebars 
    // and not directly through hbs 
    // https://github.com/donpark/hbs#handlebars 

    return new hbs.handlebars.SafeString(template(args)); 
}); 
+0

Sí! ¡Funciona para mi! ¡Muchas gracias hombre! – PascalPrecht

+10

Si funcionó, marque la respuesta en consecuencia – brafales

+0

Sólo en caso de que alguien se encuentra con esto .... El método 'SafeString' se debe acceder a través de' hbs.handlebars' y no directamente a través 'hbs' ... esto es para el nodo. js usuarios :) – Maroshii

24

Sólo me gustaría señalar que el uso de soportes triples elimina la necesidad de ejecutar cualquiera de los métodos adicionales para convertir a HTML. Por ejemplo, cuando acceda a los datos de la plantilla, simplemente utilice llaves triples rizadas {{{templateData}}}, lo que le permite obtener HTML sin formato.

+0

¡Esto me ayudó a encontrar mi respuesta! TY – Fasani

Cuestiones relacionadas