Renderuj zmienną jako HTML w EJS

98

Używam biblioteki Forms dla Node.js ( Forms ), która wyrenderuje dla mnie formularz na zapleczu w następujący sposób:

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

Ostatnia linia var signup_var signup_form_as_html = signup_form.toHTML();tworzy blok HTML, który wygląda następująco:

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

Po prostu długi ciąg kodu HTML. Następnie próbuję wyrenderować go za pomocą EJS i Express, używając następującego kodu:

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

Ale przy renderowaniu HTML jest po prostu ciągiem, który zamieściłem powyżej, a nie rzeczywistym kodem HTML (a tym samym formularzem, jaki chcę). Czy istnieje sposób, aby ten ciąg był renderowany jako rzeczywisty kod HTML przy użyciu EJS? A może będę musiał użyć czegoś takiego jak Jade?

MrJaeger
źródło

Odpowiedzi:

296

Dzięki EJS możesz mieć kilka tagów:

    <% code %>

... czyli kod, który jest oceniany, ale nie drukowany.

    <%= code %>

... który jest kodem, który jest oceniany i drukowany (uciekany).

    <%- code %>

... czyli kod, który jest oceniany i drukowany (bez zmiany znaczenia).

Ponieważ chcesz wydrukować swoją zmienną i NIE zmienić jej znaczenia, twój kod będzie ostatnim typem (z <%-). W Twoim przypadku:

    <%- my_form_content %>

Więcej tagów można znaleźć w pełnej dokumentacji EJS

Jakub Oboza
źródło
8
props dude bravo, które natychmiast rozwiązały mój problem
cbsm1th
po prostu spędziłem godziny na zastanawianiu się, jak to zrobić, dopóki nie znalazłem tego posta. Dzięki wielkie !!!
Sam,
Świetnie, uratowałeś mi dzień.
Afshin Mehrabani
Użyłem dokładnie tego modułu, o który pytano tutaj. Cóż za szczęście :) Dzięki
majidarif
Czego można użyć do pominięcia znaku „(odwrócony przecinek)?
Victor
16

Aktualizacja z października 2017 r

Te nowe EJS (v2, v2.5.7) rozwój dzieje się tutaj: https://github.com/mde/ejs Stare EJS (v0.5.x, 0.8.5, v1.0.0) jest dostępny tutaj https: / /github.com/tj/ejs

Teraz dzięki ejs możesz zrobić jeszcze więcej. Możesz użyć:

  • Wyjście <%= %>ucieczki z (konfigurowalna funkcja ucieczki)
  • Surowe wyjście bez zmiany znaczenia z <%- %>
  • Tryb przycinania nowej linii („slurping nowej linii”) z -%>tagiem końcowym
  • Tryb przycinania białych znaków (slurp wszystkie białe znaki) do sterowania przepływem za pomocą <%_ _%>
  • Sterowanie przepływem za pomocą <% %>

Więc w twoim przypadku to będzie <%- variable %>gdzie variablejest coś jak

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

Mam nadzieję, że to komuś pomoże. 🙂

Pavel Kovalev
źródło
3

Miałem ten sam problem z renderowaniem wejścia textarea z edytora wysiwyg zapisanego jako html w mojej bazie danych. Przeglądarka nie wyrenderuje go, ale wyświetli html jako tekst. Po godzinach poszukiwań dowiedziałem się

<%= data %> dane uciekły podczas

<%- data %>pozostawiono dane „surowe” (bez zmiany znaczenia), a przeglądarka mogła je teraz wyrenderować.

Ufenei augustine
źródło