Візуалізуйте змінну як HTML у EJS


97

Я використовую бібліотеку 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? Або мені доведеться використовувати щось на зразок Джейд?

Відповіді:


294

За допомогою EJS ви можете мати кілька тегів:

<% code %>

... це код, який оцінюється, але не роздруковується.

<%= code %>

... це код, який обчислюється та роздруковується (екранований).

<%- code %>

... це код, який обчислюється та роздруковується (не захищений).

Оскільки ви хочете надрукувати свою змінну, а НЕ уникнути її, ваш код буде останнім типом (із символом <%-). У вашому випадку:

<%- my_form_content %>

Для отримання додаткових тегів див. Повну документацію EJS


7
реквізит чувак браво, що миттєво
вирішив

я просто годинами роздумував, як це зробити, поки не знайшов цю публікацію. Дуже дякую !!!
Сем

Приємно, ти врятував мій день.
Афшин Мехрабані

Використовував точний модуль, який запитували тут. Так пощастило :) Дякую
majidarif

Що можна використати для втечі також символу "(перевернута кома)?"
Віктор,

15

Оновлення за жовтень 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 ви можете зробити ще більше. Ви можете використовувати:

  • Вихідний вихід із <%= %>(функція евакуатора може бути налаштована)
  • Невирізаний вихід сировини з <%- %>
  • Режим обрізання нового рядка (`` рядок нового рядка '') із -%>кінцевим тегом
  • Режим обрізки пробілів (вилучити весь пробіл) для управління потоком за допомогою <%_ _%>
  • Контроль потоку за допомогою <% %>

Отже, у вашому випадку це буде <%- 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.