мопс добавить / удалить имя класса по переменной из NodeJS

Question

У меня есть шаблон мопса, который должен отображать красный текст при возврате ошибки и зеленый текст при успешной операции.

Мне трудно установить имена классов <p/>на основе statusответа, возвращенного моей серверной частью NodeJS.

Мой NodeJS отображает мою страницу следующим образом:

router.get('/forgot-password',
    session.ensureNotLoggedIn('/user/dashboard'),
    (req, res, next) => {
        res.render("forgot-password");
    });

router.post('/forgot-password',
    session.ensureNotLoggedIn('/user/logout'),
    (req, res, next) => {
        if (!req.body.edtEmail) {
            res.render("forgot-password");
        }
        emailer.sendVerifyEmail().then(value => {
            res.render("forgot-password", {message: "Email sent, check your inbox!", status: true});
        }).catch(reason => {
            res.render("forgot-password", {message: "Failed to send email [" + reason + "]", status: false});
        })
    });

Ключевой момент - это { message: [string], status: [bool] }. Мне нужно отобразить message, и на основе status, должен либо иметь класс, text-dangerлибо в text-successслучае неудачи или успеха соответственно.

Ниже приведены различные методы, которые я безуспешно пробовал. Чтобы уточнить, statusзначение, falseкоторое должно добавить text-dangerкласс.

---

В моем шаблоне мопса:

• Я пробовал ( источник ):

  p#lblMessage(class = status ? text-success : text-warning) #{message}

рендеринг

<p id="lblMessage">Failed to send email [true]</p>

• Пробовал (источник):

  p#lblMessage(class="#{status ? text-success : text-warning}") #{message}

рендеринг:

<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>

• Пробовал ( источник ):

  p#lblMessage(class = "#{status ? text-success : text-warning}") #{message}

рендеринг:

<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>

Выполнение чего-то вроде этого кажется довольно контрпродуктивным и нелепым в случае наличия нескольких классов и состояний и т.д. (ниже, что не работает - скорее всего, потому что я делаю что-то не так: источник ).

if (status)
    p.text-success#lblMessage #{message}
else
    p.text-warning#lblMessage #{message}

Как я могу использовать переменные, переданные из серверной части NodeJS, для добавления / изменения / удаления классов html-элементов в шаблоне мопса?

Answer 1

Добавление условного имени класса может быть достигнуто следующим образом:

p#lblMessage(class=(status  ? 'text-success' : 'text-warning')) #{message}

Чтобы объяснить разницу между приведенным выше кодом и упомянутым вами примером :

classАтрибут получает строку, мопс использовать это в качестве значения. Если возвращается логическое значение (или значение NULL), атрибут self отображается или нет. Например, флажок:

input(type='checkbox', checked=(1===1 ? true : false))
input(type='checkbox', checked=(1===2 ? true : false))

rendered to:

<input type="checkbox" checked="checked">
<input type="checkbox">

Answer 2

После некоторого тестирования, дополнительного чтения / поиска и т. Д. Я нашел рабочее решение. Я не рекомендую использовать свое решение, я публикую его как «ступеньку» к тому, как я перехожу к решению, основываясь на моем чтении предложений, форумов и т. Д.

Обратите внимание: я не знал о ()синтаксисе скобок в момент поиска решения

//this first line is in the case of a GET, so the <p/> isn't rendered
if status !== undefined
    p#lblMessage(class=status ? "text-success" : "text-danger") #{message}

Используя WebStorm, я заметил возможную синтаксическую ошибку (однако страница скомпилировалась правильно):

Я предлагаю вместо этого использовать решение @ kmgt