pug aggiunge / rimuove il nome della classe in base alla variabile da NodeJS
Ho un modello pug che dovrebbe visualizzare il testo rosso quando viene restituito un errore e il testo verde quando un'operazione ha successo.
Ho difficoltà a impostare il nome della <p/>
classe in base alla status
risposta restituita dal mio backend NodeJS.
Il mio NodeJS rende la mia pagina come segue:
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 chiave da portare via è il { message: [string], status: [bool] }
. Devo eseguire il rendering di message
, e in base a status
, dovrebbe avere una classe text-danger
o text-success
se fallito o riuscito rispettivamente.
Di seguito sono riportati vari metodi che ho provato senza successo. Per chiarire, il status
valore è false
che dovrebbe aggiungere text-danger
classe.
Nel mio modello di carlino:
Ho provato ( fonte ):
p#lblMessage(class = status ? text-success : text-warning) #{message}
rendering
<p id="lblMessage">Failed to send email [true]</p>
Provato (fonte):
p#lblMessage(class="#{status ? text-success : text-warning}") #{message}
rendering:
<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>
Provato ( fonte ):
p#lblMessage(class = "#{status ? text-success : text-warning}") #{message}
rendering:
<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>
Fare qualcosa del genere sembra abbastanza controproducente e ridicolo nel caso di più classi e stati, ecc. (Di seguito non funziona, molto probabilmente perché sto facendo qualcosa di sbagliato: fonte ).
if (status)
p.text-success#lblMessage #{message}
else
p.text-warning#lblMessage #{message}
Come posso utilizzare le variabili passate dal backend NodeJS per aggiungere / modificare / rimuovere classi di elementi html nel modello pug?
Risposte
L'aggiunta di un nome classe condizionale può essere ottenuta in questo modo:
p#lblMessage(class=(status ? 'text-success' : 'text-warning')) #{message}
Per spiegare la differenza tra il codice sopra e il tuo esempio citato :
L' class
attributo sta ottenendo una stringa, pug lo usa come valore. Se viene restituito un valore booleano (o null), l'attributo self viene restituito o meno. Ad esempio una casella di controllo:
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">
Dopo alcuni test, ulteriori letture / ricerche, ecc.Ho trovato una soluzione funzionante. Non consiglio di utilizzare la mia soluzione, la sto pubblicando come un `` trampolino di lancio '' di come posso trovare una soluzione basata sulla mia lettura su suggerimenti, forum, ecc.
Nota, non ero a conoscenza della ()
sintassi delle parentesi al momento di trovare una soluzione
//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}
Utilizzando WebStorm, ho notato un possibile errore di sintassi (tuttavia la pagina è stata compilata correttamente):

Suggerisco di usare @ di kmgt soluzione , invece