122 votes

Rendre une variable en HTML dans EJS

J'utilise la bibliothèque Forms pour Node.js ( Formulaires ), qui rendra un formulaire pour moi sur le backend comme suit :

var signup_form = forms.create({
    username: fields.string({required: true})
    , password: fields.password({required: true})
    , confirm:  fields.password({
        required: true
        , validators: [validators.matchField('password')]
    })
    , email: fields.email()
});
var signup_form_as_html = signup_form.toHTML();

La dernière ligne var signup_var signup_form_as_html = signup_form.toHTML(); crée un bloc de HTML qui se présente comme suit :

<div class="field required"><label for="id_username">Username</label><input type="text" name="username" id="id_username" /></div><div class="field required"><label for="id_password">Password</label><input type="password" name="password" id="id_password" /></div><div class="field required"><label for="id_confirm">Confirm</label><input type="password" name="confirm" id="id_confirm" /></div><div class="field"><label for="id_email">Email</label><input type="text" name="email" id="id_email" /></div>

Il s'agit en fait d'une longue chaîne de caractères HTML. J'essaie ensuite de la rendre en utilisant EJS et Express avec le code suivant :

res.render('signup.ejs', {
    session: loginStatus(req)
    , form: signup_form_as_html
});

Mais lors du rendu, le HTML est simplement la chaîne que j'ai affichée ci-dessus, plutôt que du vrai HTML (et donc un formulaire comme je le souhaite). Existe-t-il un moyen de faire en sorte que cette chaîne soit rendue comme du vrai HTML en utilisant EJS ? Ou dois-je utiliser quelque chose comme Jade ?

369voto

Jakub Oboza Points 1641

Avec EJS, vous pouvez avoir plusieurs balises :

    <% code %>

... qui est un code évalué mais non imprimé.

    <%= code %>

... qui est un code évalué et imprimé (échappé).

    <%- code %>

... qui est un code évalué et imprimé (non échappé).

Puisque vous voulez imprimer votre variable et NON l'échapper, votre code serait le dernier type (avec la balise <%- ). Dans votre cas :

    <%- my_form_content %>

Pour plus d'informations sur les balises, voir la page documentation complète sur l'EJS

23voto

Pavel Kovalev Points 302

Mise à jour d'octobre 2017

En nouveau ejs (v2, v2.5.7) est en cours de développement : https://github.com/mde/ejs L'ancien ejs (v0.5.x, 0.8.5, v1.0.0) est disponible ici https://github.com/tj/ejs

Maintenant, avec ejs, vous pouvez faire encore plus. Vous pouvez utiliser :

  • Sortie échappée avec <%= %> (fonction d'échappement configurable)
  • Sortie brute non codée avec <%- %>
  • Mode de découpage des nouvelles lignes ('newline slurping') avec -%> étiquette de fin
  • Mode "whitespace-trim" (suppression de tous les espaces blancs) pour le flux de contrôle avec <%_ _%>
  • Flux de contrôle avec <% %>

Dans votre cas, il s'agira donc de <%- variable %> donde variable est quelque chose comme

var variable = "text here <br> and some more text here";

4voto

J'ai eu le même problème avec le rendu de l'entrée textarea à partir d'un éditeur wysiwyg sauvegardé comme html dans ma base de données. Le navigateur ne le rendait pas mais affichait le html comme du texte. Après des heures de recherche, j'ai trouvé

<%= data %> données échappées alors que

<%- data %> a laissé les données "brutes" (non encapsulées) et le navigateur peut maintenant les restituer.

1voto

Sjonchhe Points 1

Selon l'ejs doc

<% 'Scriptlet' tag, pour le flux de contrôle, pas de sortie

<%_ 'Whitespace Slurping' Scriptlet tag, supprime tous les espaces blancs qui le précèdent

<%= Produit la valeur dans le modèle (HTML échappé)

<%- Produit la valeur non encapsulée dans le modèle

<%# Balise de commentaire, pas d'exécution, pas de sortie

<%%% Produit un "<%" littéral

%> Balise de fin simple

-%> Trim-mode ('newline slurp') tag, coupe la nouvelle ligne suivante

_%> Balise finale 'Whitespace Slurping', supprime tous les espaces blancs après elle

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X