pug ajouter / supprimer un nom de classe par variable de NodeJS

Question

J'ai un modèle carlin qui devrait afficher du texte rouge lorsqu'une erreur est renvoyée et du texte vert lorsqu'une opération est réussie.

J'ai des difficultés à définir le <p/>(s) nom (s) de classe en fonction de la statusréponse renvoyée par mon backend NodeJS.

Mon NodeJS rend ma page comme suit:

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});
        })
    });

La clé à emporter est le { message: [string], status: [bool] }. Je dois rendre le message, et basé sur le status, le devrait avoir une classe text-dangerou en text-successcas d'échec ou de succès respectivement.

Voici différentes méthodes que j'ai essayées sans succès. Pour clarifier, la statusvaleur est celle falsequi doit ajouter la text-dangerclasse.

---

Dans mon modèle carlin:

• J'ai essayé ( source ):

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

le rendu

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

• Essayé (source):

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

le rendu:

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

• Essayé ( source ):

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

le rendu:

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

Faire quelque chose comme cela semble tout à fait contre - productif et ridicule dans le cas d'avoir plusieurs classes et états, etc (ci - dessous qui ne fonctionne pas ofc - le plus probable que je fais quelque chose de mal: la source ).

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

Comment puis-je utiliser des variables transmises depuis le backend NodeJS pour ajouter / modifier / supprimer des classes d'éléments html dans un modèle pug?

Answer 1

L'ajout d'un nom de classe conditionnel peut être réalisé par ceci:

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

Pour expliquer la différence entre le code ci-dessus et votre exemple mentionné :

L' classattribut obtient une chaîne, carlin l'utilise comme valeur. Si un booléen est retourné (ou nul), l'attribut self est rendu ou non. Par exemple, une case à cocher:

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

Après quelques tests, plus de lecture / recherche, etc. j'ai trouvé une solution de travail. Je ne recommande pas d'utiliser ma solution, je la publie comme un `` tremplin '' de la façon dont je suis arrivé à une solution basée sur ma lecture de suggestions, de forums, etc.

Remarque, je n'étais pas au courant de la ()syntaxe des parenthèses au moment de trouver une solution

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

En utilisant WebStorm, j'ai remarqué une possible erreur de syntaxe (cependant la page compilée correctement):

Je suggère d'utiliser la solution de @ kmgt à la place