Rendre une variable au format HTML dans EJS

97

J'utilise la bibliothèque Forms pour Node.js ( Forms ), 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 ressemble à ceci:

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

En gros, juste une longue chaîne de HTML. J'essaye ensuite de le rendre en utilisant EJS et Express en utilisant 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 postée ci-dessus, plutôt que le HTML réel (et donc un formulaire comme je veux). Existe-t-il un moyen de rendre cette chaîne en HTML réel en utilisant EJS? Ou vais-je devoir utiliser quelque chose comme Jade?

node.js express ejs MrJaeger
la source

Réponses:

294

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 ne PAS l'échapper, votre code serait le dernier type (avec le <%-). Dans ton cas:

<%- my_form_content %>

Pour plus de balises, consultez la documentation complète d'EJS

Jakub Oboza
la source
7
accessoires mec bravo qui a résolu mon problème instantanément
cbsm1th
Je viens de passer des heures à comprendre comment faire cela jusqu'à ce que je trouve ce message. Merci beaucoup !!!
Sam
Bien, tu as sauvé ma journée.
Afshin Mehrabani
Utilisait le module exact demandé ici. So pretty lucky :) Merci
majidarif
Que peut-on utiliser pour échapper également le caractère "(virgule inversée)?
Victor
15

Mise à jour d'octobre 2017

Le nouveau développement ejs (v2, v2.5.7) se déroule ici: 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 sans échappement avec <%- %>
  • Mode Newline-Trim ('newline slurping') avec -%>balise de fin
  • Mode de découpage des espaces (slurp tous les espaces) pour le flux de contrôle avec <%_ _%>
  • Contrôlez le flux avec <% %>

Donc, dans votre cas, ce sera <%- variable %>là où se variabletrouve quelque chose comme

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

J'espère que ça aidera quelqu'un. 🙂

Pavel Kovalev
la source
3

J'ai eu le même problème avec le rendu de l'entrée textarea à partir d'un éditeur wysiwyg enregistré au format html dans ma base de données. Le navigateur ne le rendra pas mais affichera le code HTML sous forme de texte. Après des heures de recherche, j'ai découvert

<%= data %> données échappées pendant

<%- data %>laissé les données «brutes» (sans échappement) et le navigateur peut maintenant les rendre.

Ufenei augustine
la source