Визуализировать переменную как 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.