Jade-Bedingung (if / else) zum Hinzufügen einer Klasse zu div inline

69

Gibt es eine Möglichkeit, dies in einer Jade-Vorlage inline zu tun?

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

Möchte diese bedingte Prüfung "inline" durchführen und das Ergebnis würde die .in am Ende des div hinzufügen, wenn fromEdit existiert.

javascript node.js express pug jstevens13
quelle
Ich benutze diesa(class=(selectNav=='myprofile' && 'selected'), href='...')
Muhammad Umer

Antworten:

107

Das funktioniert:

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

Probieren Sie es hier aus .

Dogbert
quelle
2
aber Sie möchten nicht einmal, dass das Element ein classAttribut hat, wenn die Bedingung falsch ist.
vsync
Vorgehensweise für Objektwerte wie a (class = task [i] .status? 'Btn btn-success': 'btn btn-dark', href = /turn/ ${tasks[i]._id}) Fertig Fehler anzeigen Die Eigenschaft 'status' von undefined kann nicht gelesen werden
Pankaj
79

Wenn Sie nicht möchten, dass das Klassenattribut hinzugefügt wird, wenn kein Wert vorhanden ist, können Sie es anstelle einer leeren Zeichenfolge undefiniert zuweisen. Hier ist das vorherige Beispiel, leicht modifiziert:

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

Update: Wenn Sie Mops verwenden , können Sie jetzt beliebig viele class=Deklarationen mit unterschiedlichen Bedingungen hinzufügen , die im resultierenden Klassenattribut verkettet werden. z.B:

#demo.collapse(class=cond1 && 'class1' class=cond2 && 'class2')
Arkanoid
quelle
Vielen Dank! genau das, wonach ich gesucht habe.
Was ist mit einem Fall, in dem mehrere Bedingungen überprüft werden müssen? Zum Beispiel zwei Klassen mit jeweils einem eigenen Scheck?
Alex Shwarc
5

Wie unter http://jade-lang.com/reference/attributes/ dokumentiert :

Das Klassenattribut [...] Es kann sich auch um ein Objekt handeln, das Klassennamen auf wahre oder falsche Werte abbildet. Dies ist nützlich, um bedingte Klassen anzuwenden

Die Aufgabe kann auch wie folgt ausgeführt werden:

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

Es funktioniert zwar hier nicht http://naltatis.github.com/jade-syntax-docs/ (ich denke, sie müssen etwas aktualisieren), aber es funktioniert mit [email protected].

infografnet
quelle
Dies ist der Weg, um jetzt mit Jade / Mops zu gehen. Es ermöglicht mehrere bedingte Klassen, wobei dem Objekt ein weiterer Schlüssel hinzugefügt wird.
Webdif
3

Mit Mops 2 können Sie diese Syntax verwenden:

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

mehr hier: https://pugjs.org/language/attributes.html

Bravedick
quelle
2

Obwohl es sich um eine alte Frage handelt, stelle ich fest, dass Folgendes funktioniert, da Pug die integrierte Erkennung der Objektexistenz enthält:

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

Wenn dies nicht offensichtlich ist, wird überprüft, ob es fromEditvorhanden ist und ob es inals Klasse eingegeben wird. Andernfalls bleibt die Klasse leer.

Matthew Sundberg
quelle