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.

— jstevens13
quelle

Ich benutze diesa(class=(selectNav=='myprofile' && 'selected'), href='...')

— Muhammad Umer

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 jade@1.11.0.

— 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