web-dev-qa-db-fra.com

Handbars.js remplace-t-il les caractères de nouvelle ligne par <br>?

Essayer d'utiliser handlebars.js pour les modèles, mais la bibliothèque semble ignorer les nouvelles lignes.

Quelle est la bonne façon de gérer les nouvelles lignes? Doivent-ils être remplacés manuellement après l'action de création de modèles?

handlebars.jsclient-side-templating
37
Uri

Il ne le fait pas automatiquement, mais en utilisant la fonction d'aide, cela peut être réalisé:

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

Modèle HTML:

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

En insérant trois accolades au lieu des deux classiques, vous pouvez demander au guidon d'arrêter ses techniques normales d'échappement des expressions html telles que <br> et <p>;

Par exemple, sur le site Web du guidon:

"Guidon HTML-échappe les valeurs renvoyées par un {{expression}}. Si vous ne voulez pas que le guidon échappe à une valeur, utilisez le "triple-stash", {{{. "

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

dans ce contexte:

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

résulte 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>
28
Douglas Adam Smith II

Voici deux approches que je préfère à la réponse actuellement acceptée:

  1. Utilisation white-space: pre-wrap; ou white-space: pre; sur l'élément où vous souhaitez conserver les sauts de ligne (autorisant ou supprimant le retour à la ligne naturel respectivement). Si vous voulez que les séquences d'espaces soient réduites, c'est ainsi que le texte en HTML est normalement présenté, utilisez white-space: pre-line; mais notez que IE8 et les versions antérieures ne prennent pas en charge cela. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

  2. Ou voici une version de l'assistant de modèle qui ne nécessite pas de copier-coller de code externe:

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

    Voir https://github.com/meteor/meteor/blob/devel/packages/blaze/preamble.js pour Blaze._escape

10
Matt Jenkins

Toute solution qui utilise des staches triples ouvrira votre application aux attaques XSS, sauf si vous implémentez quelque chose pour assainir le HTML.

Je suggère d'utiliser le <pre> tag plutôt que de créer un assistant personnalisé.

1
ryanw51

J'ai utilisé le code publié par @Uri et c'était très utile.

Mais je me suis rendu compte que lorsque j'inscris l'assistant, le paramètre de fonction qu'il reçoit n'est pas le texte, mais la fonction qui est appelée à l'intérieur du modèle Handlebars. J'ai donc d'abord dû l'appeler pour obtenir le texte.

Afin de clarifier, je devais faire:

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

C'est la seule façon dont je pourrais le faire fonctionner.

1
eze.scaruli

Pour d'autres comme moi qui suivaient le code de démarrage et ne savaient pas pourquoi aucun code HTML n'apparaissait.

in documentation des expressions du guidon il indique

Guidon HTML-échappe les valeurs renvoyées par une {{expression}}. Si vous ne voulez pas que le guidon échappe à une valeur, utilisez le "triple-stash", {{{

0
Nagy Wesley