not - ¿Handlebars.js reemplaza los caracteres de nueva línea con<br>?

if not handlebars js

Question

Intenta usar handlebars.js para plantillas, pero la biblioteca parece ignorar nuevas líneas.

¿Cuál es la forma correcta de tratar con nuevas líneas? ¿Deberían reemplazarse manualmente después de la acción de creación de plantillas?

Answer 1

Al insertar tres llaves en lugar de los dos convencionales, puede indicarle a los manillares que detengan sus técnicas normales de escape de las expresiones html, como <br> y <p> ;

Por ejemplo, desde el sitio web del manillar:

"Handlebars HTML-escapes los valores devueltos por una {{expression}} . Si no quieres que Handlebars escape un valor, utiliza el" triple-stash ", {{{ ."

 <div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{{body}}}
</div>
</div>

con este contexto:

 {
title: "All about <p> Tags",
body: "<p>This is a post about &lt;p&gt; tags</p>"
}

resultados en:

 <div class="entry">
<h1>All About &lt;p&gt; Tags</h1>
<div class="body">
<p>This is a post about &lt;p&gt; tags</p>
</div>
</div>

Answer 2

Aquí hay dos enfoques que prefiero sobre la respuesta aceptada actualmente:

1. Use white-space: pre-wrap; o white-space: pre; en el elemento donde desea preservar los saltos de línea (permitiendo o suprimiendo el ajuste de línea natural, respectivamente). Si desea que se colapsen las secuencias de espacios en blanco, que es cómo se presenta normalmente el texto en HTML, utilice white-space: pre-line; pero tenga en cuenta que IE8 y siguientes no son compatibles con esto. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

2. O aquí hay una versión del asistente de plantilla que no requiere ninguna copia y pegado de código externo:

   Template.registerHelper(''breaklines'', function (text) {
   text = Blaze._escape(text);
   text = text.replace(/(/r/n|/n|/r)/gm, ''<br>'');
   return new Spacebars.SafeString(text);
   });

   Consulte https://github.com/meteor/meteor/blob/devel/packages/blaze/preamble.js para Blaze._escape

Answer 3

Cualquier solución que use triple staches abrirá su aplicación a ataques XSS a menos que implemente algo para desinfectar el HTML.

Sugeriría usar la etiqueta <pre> lugar de crear una ayuda personalizada.

Answer 4

He usado el código publicado por @Uri y fue muy útil.

Pero me di cuenta de que cuando registro el helper, el parámetro de función que recibe no es el texto, sino la función que se llama dentro de la plantilla de manubrios. Así que primero tuve que llamar para obtener el texto.

Para aclarar, tuve que hacer:

Handlebars.registerHelper(''breaklines'', function(descriptionFunction) {
text = descriptionFunction();
text = Handlebars.Utils.escapeExpression(text);
text = text.toString();
text = text.replace(/(/r/n|/n|/r)/gm, ''<br>'');
return new Handlebars.SafeString(text);
});

Esta es la única forma en que podría hacerlo funcionar.

Answer 5

No lo hace de forma automática, pero con la función de ayudantes esto se puede lograr:

JS:

Handlebars.registerHelper(''breaklines'', function(text) {
text = Handlebars.Utils.escapeExpression(text);
text = text.replace(/(/r/n|/n|/r)/gm, ''<br>'');
return new Handlebars.SafeString(text);
});

Plantilla HTML:

<div>
{{breaklines description}}
</div>