handlebars.js sostituisce i caratteri di nuova riga con <br>?

Question

Tentativo di utilizzare handlebars.js per il template ma la libreria sembra ignorare newline.

Qual è il modo corretto per gestire le nuove linee? Dovrebbero essere sostituiti manualmente dopo l'azione del template?

Answer 1

E non lo fa automaticamente, ma utilizzando gli assistenti dispongono di questo può essere realizzato:

JS: Modello

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

HTML:

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

Answer 2

Ho usato il codice pubblicato da @Uri ed è stato molto utile.

Ma mi sono reso conto che quando registro l'helper, il parametro di funzione che riceve non è il testo, ma la funzione che viene chiamata all'interno del modello di Handlebars. Quindi prima ho dovuto chiamarlo per ottenere il testo.

Al fine di chiarire, ho dovuto fare:

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

questo è l'unico modo ho potuto farlo funzionare.

Answer 3

Inserendo tre parentesi anziché i due convenzionali, è possibile indicare ai manubri di interrompere le normali tecniche di escape di espressioni html come <br> e <p>;

Ad esempio, dal sito manubrio:

"manubrio HTML-sfugge valori restituiti da un {{expression}} Se non si desidera manubrio per sfuggire a un valore, utilizzare il 'triple-scorta'., {{{"

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

con questo contesto:

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

risultati in:

<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 4

Qualsiasi soluzione che utilizza staches triple si aprirà l'applicazione per attacchi XSS a meno che non si sceglie di implementare qualcosa per disinfettare il codice HTML.

Suggerirei di utilizzare il tag <pre> anziché creare un helper personalizzato.

Answer 5

Qui ci sono due approcci che preferisco sopra la risposta attualmente accettata:

1. Usa white-space: pre-wrap; o white-space: pre; sull'elemento in cui si desidera preservare la line-break (permettendo e nella soppressione di linea naturale di avvolgimento rispettivamente). Se vuoi che le sequenze di spazi bianchi vengano compresse, ovvero come viene normalmente presentato il testo in HTML, utilizza white-space: pre-line; ma nota che IE8 e versioni successive non supportano questo.https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

2. O qui è una versione del aiutante modello che non richiede alcuna copia e incolla di codice esterno:

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

   Vedere https://github.com/meteor/meteor/blob/devel/packages/blaze/preamble.js per Blaze._escape