pug aggiunge / rimuove il nome della classe in base alla variabile da NodeJS

Aug 20 2020

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 statusrisposta 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-dangero text-successse fallito o riuscito rispettivamente.

Di seguito sono riportati vari metodi che ho provato senza successo. Per chiarire, il statusvalore è falseche dovrebbe aggiungere text-dangerclasse.


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

2 kmgt Aug 20 2020 at 20:31

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' classattributo 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">
1 CybeX Aug 20 2020 at 22:03

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