pug agrega / elimina el nombre de la clase por variable de NodeJS
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 status
respuesta 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-danger
o text-success
si falló o tuvo éxito, respectivamente.
A continuación se muestran varios métodos que he probado sin éxito. Para aclarar, el status
valor es false
cuál debe agregar text-danger
clase.
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
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 class
atributo 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">
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