Rendering di una variabile come HTML in EJS


97

Sto usando la libreria Forms per Node.js ( Forms ), che renderà un modulo per me sul back-end in questo modo:

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

L'ultima riga var signup_var signup_form_as_html = signup_form.toHTML();crea un blocco di HTML che appare come tale:

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

Fondamentalmente solo una lunga stringa di HTML. Quindi provo a renderlo usando EJS ed Express usando il seguente codice:

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

Ma durante il rendering l'HTML è semplicemente la stringa che ho postato sopra, piuttosto che l'HTML effettivo (e quindi un modulo come voglio). Esiste un modo per rendere quella stringa visualizzata come HTML effettivo utilizzando EJS? O dovrò usare qualcosa come Jade?

Risposte:


294

Con EJS puoi avere diversi tag:

<% code %>

... che è il codice che viene valutato ma non stampato.

<%= code %>

... che è il codice che viene valutato e stampato (con escape).

<%- code %>

... che è il codice che viene valutato e stampato (non con escape).

Dal momento che vuoi stampare la tua variabile e NON eseguire l'escape, il tuo codice sarà l'ultimo tipo (con il <%-). Nel tuo caso:

<%- my_form_content %>

Per ulteriori tag, vedere la documentazione completa di EJS


7
puntelli amico bravo che ha risolto il mio problema all'istante
cbsm1th

ho passato ore a capire come farlo finché non ho trovato questo post. Grazie mille !!!
Sam

Bene, mi hai salvato la giornata.
Afshin Mehrabani

Stavo usando il modulo esatto richiesto qui. Quindi abbastanza fortunato :) Grazie
Majidarif

Cosa può essere usato per fare l'escape anche del carattere "(virgola invertita)?
Victor

15

Aggiornamento di ottobre 2017

Il nuovo sviluppo di ejs (v2, v2.5.7) sta avvenendo qui: https://github.com/mde/ejs Il vecchio ejs (v0.5.x, 0.8.5, v1.0.0) è disponibile qui https: / /github.com/tj/ejs

Ora con ejs puoi fare ancora di più. Puoi usare:

  • Uscita con <%= %>escape con (funzione di escape configurabile)
  • Output raw senza caratteri di escape con <%- %>
  • Modalità newline-trim ('newline slurping') con -%>tag di fine
  • Modalità di taglio degli spazi bianchi (elimina tutti gli spazi bianchi) per il flusso di controllo con <%_ _%>
  • Controllare il flusso con <% %>

Quindi, nel tuo caso sarà <%- variable %>dov'è variablequalcosa di simile

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

Spero che questo aiuti qualcuno. 🙂


3

Ho avuto lo stesso problema con il rendering dell'input textarea da un editor wysiwyg salvato come html nel mio database. Il browser non lo visualizzerà ma visualizzerà l'html come testo. Dopo ore di ricerca, l'ho scoperto

<%= data %> dati di escape mentre

<%- data %>ha lasciato i dati "grezzi" (senza caratteri di escape) e il browser potrebbe ora visualizzarli.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.