pug add/remove class 名称来自 NodeJS 的变量

Question

我有一个 pug 模板，它应该在返回错误时显示红色文本，在操作成功时显示绿色文本。

我很难根据从我的 NodeJS 后端返回的 status 响应设置 <p/> class 名称。

我的 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，如果失败或成功，它们应该分别具有 class text-danger 或 text-success。

以下是我试过的各种方法都没有成功。澄清一下，status 值是 false 应该添加 text-danger class.

在我的哈巴狗模板中：

我试过 ():

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>

已尝试 (source):

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

渲染：

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

在有多个 classes 和状态等的情况下，做这样的事情似乎适得其反且荒谬（下面不起作用 - 很可能是因为我做错了什么：source).

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

如何使用从 NodeJS 后端传递到 pug 模板中的 add/alter/remove classes of 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

经过一些测试、更多 reading/searching 等，我找到了一个可行的解决方案。我不建议使用我的解决方案，我将其作为 'stepping stone' 发布，说明我如何根据对建议、论坛等的阅读来找到解决方案

注意，我在寻找解决方案时并没有意识到括号 () 语法

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

pug add/remove class 名称来自 NodeJS 的变量

pug add/remove class name by variable from NodeJS

javascript

node.js

jade4j

pug