javascript - jade - Escape las llaves dobles{{…}} en la plantilla de Bigote.(Plantilla de una plantilla en NodeJS)

pug express

Question

Estoy tratando de crear una plantilla, como a continuación:

{{{
{
  "name" : "{{name}}",
  "description" : "{{description}}"
}
}}}

{{{debug this}}}

<h1>{{name}}</h1>

Donde quiero triplicar los corchetes para permanecer, pero los corchetes dobles deben reemplazarse con el JSON pasado. Cualquiera sabe la mejor manera de hacerlo sin escribir el código JS posterior al proceso, y si no es así, ¿existe un buen motor de plantillas de nodeJS para esto? tipo de escenario?

Answer 1

Como se describe en esta Pregunta, los manillares no admiten el cambio de los delimitadores. Pero puedes escapar de las llaves dobles con una barra invertida como esta:

HTML:

... /{{ myHandlbarsVar }} ...

Answer 2

Esta es una buena solución que he encontrado para este tipo de problema donde puede cambiar fácilmente los delimitadores en la configuración de la plantilla en tiempo de ejecución:

http://olado.github.com/doT/

Puede hacer la configuración RegEx de esta manera:

doT.templateSettings = {
  evaluate:    //{/{([/s/S]+?)/}/}/g,
  interpolate: //{/{=([/s/S]+?)/}/}/g,
  encode:      //{/{!([/s/S]+?)/}/}/g,
  use:         //{/{#([/s/S]+?)/}/}/g,
  define:      //{/{##/s*([/w/.$]+)/s*(/:|=)([/s/S]+?)#/}/}/g,
  conditional: //{/{/?(/?)?/s*([/s/S]*?)/s*/}/}/g,
  iterate:     //{/{~/s*(?:/}/}|([/s/S]+?)/s*/:/s*([/w$]+)/s*(?:/:/s*([/w$]+))?/s*/}/})/g,
  varname: ''it'',
  strip: true,
  append: true,
  selfcontained: false
};

Answer 3

Otra opción es crear un ayudante para la salida de llaves.

Handlebars.registerHelper(''curly'', function(object, open) {
    return open ? ''{'' : ''}'';
});

y luego usarlo en la plantilla como esta:

<script id="template" type="text/x-handlebars-template">
    {{curly true}}{{name}}{{curly}}
</script>

que luego produce:

{Stack Over Flow Rocks}

Answer 4

Puede cambiar los delimitadores a algo que no entre en conflicto con los bigotes triples, como las etiquetas de estilo erb:

{{=<% %>=}}
{{{
{
  "name": "<% name %>",
  "description": "<% description %>"
}
}}}
{{{debug this}}}
<%={{ }}=%>

Tenga en cuenta que puede hacer esto tantas veces como desee a lo largo de su plantilla. Cada vez que te topes con algo que entra en conflicto, elige un nuevo conjunto de delimitadores :)

Answer 5

Sólo quería un enfoque ligeramente diferente. He probado algunas otras formas y aquí hay algunas cosas que no me gustaron de ellas:

1. Cambiar los corchetes predeterminados angulares {{obj.property}} a otra cosa es una mala idea. Principalmente, ya que apenas comienza a utilizar componentes de terceros que no son conscientes de su configuración angular no estándar, los enlaces en esos componentes de terceros dejarán de funcionar. También vale la pena mencionar que el equipo de AngularJS no parece querer seguir el camino de permitir múltiples notaciones de enlace, verifique este problema
2. Me gustan bastante las plantillas de bigotes y no quiero cambiar todo el proyecto a otra cosa debido a este pequeño problema.
3. Bastantes personas recomiendan no mezclar la representación del lado del cliente y del servidor. No estoy totalmente de acuerdo, creo que si está construyendo un sitio web de varias páginas que tiene pocas páginas con angular y algunas otras que son estáticas (algo así como las páginas de Términos y Condiciones) está perfectamente bien usar plantillas del lado del servidor para hacer Mantener esas páginas más fáciles. Pero dicho esto, para las partes que son angulares no debe mezclar la representación del lado del servidor.

Ok, no, mi respuesta: si está utilizando NodeJS y Express, debe hacer lo siguiente:

Reemplace los enlaces {{}} en su parte angular con algo como {[{}]} (o algo completamente único)

Ahora en su ruta, agregue una devolución de llamada a su método de render:

app.get(''/'', function(req, res){
  res.render(''home'', {
    title: ''Awesome Website'',
    description: ''Uber Awesome Website''
  }, function(err, html){
    var htmlWithReplacedLeftBracket = html.replace(/{/[{/g, ''{{'');
    var finalHtml = htmlWithReplacedLeftBracket.replace(/}/]}/g, ''}}'');
    res.send(finalHtml);
  });
});

Esto debería permitirle usar el bigote junto con AngularJS. Una mejora que podría hacer es extraer ese método en un módulo separado para reutilizarlo en todas las rutas.

Answer 6

También puede asignar Mustache.tags = ["[[", "]]"]; antes de su compilación de plantillas.

http://jsfiddle.net/fhwe4o8k/1/

p.ej

    $(function () {
        Mustache.tags = ["[[", "]]"];
        var template = $(''#test'').html();
        Mustache.parse(template);
        var rendered = Mustache.render(template, {test: "Chris"});
        $(''#content-placeholder'').html(rendered);
    });