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?

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


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


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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.