pug agrega / elimina el nombre de la clase por variable de NodeJS

Aug 20 2020

Tengo una plantilla pug que debería mostrar texto rojo cuando se devuelve un error y texto verde cuando una operación es exitosa.

Tengo dificultades para configurar los <p/>nombres de clase en función de la statusrespuesta devuelta por mi backend NodeJS.

Mi NodeJS muestra mi página de la siguiente manera:

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 clave para llevar es el { message: [string], status: [bool] }. Necesito representar el message, y basado en el status, debería tener una clase text-dangero text-successsi falló o tuvo éxito, respectivamente.

A continuación se muestran varios métodos que he probado sin éxito. Para aclarar, el statusvalor es falsecuál debe agregar text-dangerclase.


En mi plantilla de pug:

  • Lo he intentado ( fuente ):

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

representación

<p id="lblMessage">Failed to send email [true]</p>
  • Probado (fuente):

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

representación:

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

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

representación:

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

Hacer algo como esto parece bastante contraproducente y ridículo en el caso de tener múltiples clases y estados, etc. (debajo de lo cual no funciona, lo más probable es que esté haciendo algo mal: fuente ).

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

¿Cómo puedo usar variables pasadas desde el backend de NodeJS para agregar / modificar / eliminar clases de elementos html en la plantilla pug?

Respuestas

2 kmgt Aug 20 2020 at 20:31

Esto se puede lograr para agregar un nombre de clase condicional:

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

Para explicar la diferencia entre el código anterior y el ejemplo mencionado :

El classatributo está obteniendo una cadena, pug usa esto como valor. Si se devuelve un valor booleano (o nulo), el atributo self se representa o no. Por ejemplo, una casilla de verificación:

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

Después de algunas pruebas, más lectura / búsqueda, etc., encontré una solución que funciona. No recomiendo usar mi solución, la estoy publicando como un 'trampolín' de cómo llego a una solución basada en mis lecturas de sugerencias, foros, etc.

Tenga en cuenta que no estaba al tanto de la ()sintaxis de paréntesis en el momento de encontrar una solución

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

Usando WebStorm, noté un posible error de sintaxis (sin embargo, la página se compiló correctamente):

Sugiero usar la solución de @ kmgt en su lugar