Визуализировать переменную как HTML в EJS


98

Я использую библиотеку Forms для Node.js ( Forms ), которая будет отображать для меня форму на бэкэнде следующим образом:

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

Последняя строка var signup_var signup_form_as_html = signup_form.toHTML();создает блок HTML, который выглядит так:

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

В основном это длинная строка HTML. Затем я пытаюсь визуализировать его с помощью EJS и Express, используя следующий код:

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

Но при рендеринге HTML - это просто строка, которую я разместил выше, а не фактический HTML (и, следовательно, форма, которую я хочу). Есть ли способ сделать эту строку рендерингом как фактический HTML с помощью EJS? Или мне придется использовать что-то вроде Джейд?

Ответы:


296

В EJS у вас может быть несколько тегов:

    <% code %>

... это код, который оценивается, но не распечатывается.

    <%= code %>

... это код, который оценивается и распечатывается (экранированный).

    <%- code %>

... это код, который оценивается и распечатывается (без экранирования).

Поскольку вы хотите распечатать свою переменную и НЕ экранировать ее, ваш код будет последним типом (с <%-). В твоем случае:

    <%- my_form_content %>

Дополнительные теги см. В полной документации EJS.


8
реквизит чувак браво, который мгновенно
решил

просто потратил часы, выясняя, как это сделать, пока не нашел этот пост. Спасибо !!!
Sam

Хорошо, ты спас мне день.
Афшин Мехрабани

Использовал именно тот модуль, о котором спрашивали здесь. Так
здорово

Что можно использовать для экранирования символа "(
Виктор

16

Обновление за октябрь 2017 г.

В новой EJS (v2, v2.5.7) развитие происходит здесь: https://github.com/mde/ejs Старой EJS (v0.5.x, 0.8.5, v1.0.0) доступен здесь https: / /github.com/tj/ejs

Теперь с ejs вы можете делать даже больше. Ты можешь использовать:

  • Экранированный вывод с <%= %>(настраиваемая функция escape)
  • Неэкранированный исходный вывод с <%- %>
  • Режим обрезки новой строки ('прихлебывание новой строки') с -%>конечным тегом
  • Режим обрезки пробелов (удаление всех пробелов) для потока управления с помощью <%_ _%>
  • Поток управления с <% %>

Итак, в вашем случае это будет <%- variable %>где- variableто вроде

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

Я надеюсь, что это поможет кому-то. 🙂


3

У меня была такая же проблема с рендерингом ввода текстового поля из редактора wysiwyg, сохраненного как html в моей базе данных. Браузер не будет отображать его, но отобразит HTML как текст. После нескольких часов поисков я узнал

<%= data %> экранированные данные, пока

<%- data %>оставил данные «необработанными» (без экранирования), и теперь браузер может их отображать.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.