web-dev-qa-db-fra.com

Jade conditionnel (if / else) pour ajouter une classe à div inline

Existe-t-il un moyen de le faire en ligne dans un modèle de jade?

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

Voudrait faire cette vérification conditionnelle "en ligne" et le résultat ajouterait le .in à la fin de la div si fromEdit existe.

javascriptnode.jsexpresspug
64
jstevens13

Cela marche:

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

Essayez-le ici .

100
Dogbert

Si vous ne souhaitez pas que l'attribut de classe soit ajouté lorsqu'il n'y a pas de valeur, vous pouvez l'affecter non défini au lieu d'une chaîne vide. Voici l'exemple précédent, légèrement modifié:

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

Mise à jour: En outre, si vous utilisez pug , vous pouvez maintenant ajouter autant de class= déclarations comme vous le souhaitez avec des conditions différentes et elles seront concaténées dans l'attribut de classe résultant. par exemple.:

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

Tel que documenté sur http://jade-lang.com/reference/attributes/ :

L'attribut class [...] Il peut également s'agir d'un objet mappant les noms de classe sur des valeurs vraies ou fausses, ce qui est utile pour appliquer des classes conditionnelles

la tâche peut également être effectuée par les éléments suivants:

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

Bien que cela ne fonctionne pas ici http://naltatis.github.com/jade-syntax-docs/ (je pense qu'ils ont besoin de mettre à jour quelque chose), mais cela fonctionne avec [email protected].

5
infografnet

Avec pug 2, vous pouvez utiliser cette syntaxe:

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

plus ici: https://pugjs.org/language/attributes.html

3
bravedick

Bien qu'une vieille question, je trouve que les travaux suivants depuis Pug incluent la détection d'existence d'objet intégrée:

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

Si ce n'est pas évident, cela vérifie si fromEdit existe et s'il entre in en tant que classe, sinon laissant la classe vide.

2
Matthew Sundberg