Jade/Pug: Hide div, es sei denn Variable hat Daten

Question

Ich möchte ein Div verstecken, es sei denn, das Div hat Daten an die lokale Variable erhalten. Ich habe dies im Moment:

div#cost 
     p You earn #{cost} a day! 

Aber es wird auf der Seite angezeigt. Wie verstecke ich es, bis es die Daten empfängt? Im verwirrt über Jades if/else Syntax

Answer 1

-if (cost) 
    div#cost 
     p You earn #{cost} a day! 

Zunächst einmal bedeutet die - dass es ungepufferte Javascript-Code ist. Dies bedeutet, dass dies nicht in der endgültigen Version der Vorlage gerendert wird. Wenn Sie das möchten, sollten Sie ein Skript-Tag wie folgt verwenden: script..

Zweitens wird die if-Anweisung prüfen, ob die Kosten nicht gleich null oder undefiniert sind. Wenn es nicht existiert, wird der Code innerhalb der if-Anweisung übersprungen.

Der obige Code wird im folgenden HTML führen, wenn die Kosten auf null oder nicht definiert ist nicht gleich:

<div id="cost"> 
    <p>You earn ... cost a day!</p> 
</div> 

Answer 2

nicht möglich zu erreichen, was Sie versuchen ist. Jade/Pug ist eine Template-Engine, Sie können Platzhaltervariable geben, Loops, Bedingungen usw. ausführen, aber Ihr Browser versteht jade/pug nicht, es versteht nur HTML, was bedeutet, dass Ihre Vorlage vor der Anzeige in einen statischen HTML-Inhalt konvertiert wird.

Der if/else-Block entscheidet, was Teil der generierten HTML-Datei sein soll. Sobald die Datei generiert wurde, hat jade/pug keine Kontrolle darüber.

Wenn Sie Ihr DOM dynamisch steuern möchten, können Sie ein Webframework wie Angular, Vue, React verwenden oder Sie können DOM-Manipulation mit jQuery oder von Hand mit normalem Javascript durchführen.