Визуализировать переменную как 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? Или мне придется использовать что-то вроде Джейд?

MrJaeger
источник

Ответы:

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

Уфеней августин
источник