javascript - style - pug js id

Jade condicional(if/else) para agregar clase a div en línea

Question

¿Hay alguna manera de hacer esto en línea en una plantilla de jade?

if(typeof fromEdit != ''undefined'')
   div#demo.collapse.in
else
   div#demo.collapse

Me gustaría hacer esta comprobación condicional "en línea" y el resultado agregaría el .in al final del div si fromEdit existe.

Answer 1

Aunque es una vieja pregunta, creo que los siguientes trabajos desde Pug incluyen la detección de existencia de objetos incorporada:

div#demo.collapse(class=fromEdit? ''in'':undefined)

Si no es obvio, esto verifica si fromEdit existe y si entra como la clase, de lo contrario, deja la clase en blanco.

Answer 2

Como se documenta en http://jade-lang.com/reference/attributes/ :

El atributo de clase [...] También puede ser un objeto asignar nombres de clase a valores verdaderos o falsos, lo que es útil para aplicar clases condicionales

la tarea también se puede hacer de la siguiente manera:

div#demo.collapse(class={ in: typeof fromEdit != ''undefined'' })

Aunque no funciona aquí here (creo que necesitan actualizar algo), pero funciona con [email protected].

Answer 3

Con pug 2 puedes usar esta sintaxis:

div#demo(class="collapse", class={"in": typeof fromEdit !== ''undefined''}) Home page

más aquí: https://pugjs.org/language/attributes.html

Answer 4

Esto funciona:

div#demo.collapse(class=typeof fromEdit === "undefined" ? "" : "in")

Pruébelo here .

Answer 5

Si no desea que se agregue el atributo de clase cuando no hay ningún valor, puede asignarlo indefinido en lugar de una cadena vacía. Aquí está el ejemplo anterior, ligeramente modificado:

div#demo.collapse(class=typeof fromEdit === "undefined" ? undefined : "in")

Actualización: Además, si está utilizando pug , ahora puede agregar tantas declaraciones de class= como quiera con diferentes condiciones y se concatenarán en el atributo de clase resultante. p.ej:

#demo.collapse(class=cond1 && ''class1'' class=cond2 && ''class2'')