Wie kann ich Inline-JavaScript mit Jade / Pug rendern?

222

Ich versuche, JavaScript mithilfe von Jade (http://jade-lang.com/) auf meiner Seite zum Rendern zu bringen.

Mein Projekt ist in NodeJS mit Express, alles funktioniert korrekt, bis ich etwas Inline-JavaScript in den Kopf schreiben möchte. Selbst wenn ich die Beispiele aus den Jade-Dokumenten nehme, kann ich es nicht zum Laufen bringen. Was fehlt mir?

Jade Vorlage

!!! 5
html(lang="en")
  head
    title "Test"
    script(type='text/javascript')
      if (10 == 10) {
        alert("working")
      }
  body

Resultierendes gerendertes HTML im Browser

<!DOCTYPE html>
<html lang="en">
<head>
  <title>"Test"</title>
  <script type="text/javascript">
    <if>(10 == 10) {<alert working></alert></if>}
  </script>
</head>
<body>
</body>
</html>

Irgendwelche definitiv ein Fehlschlag hier irgendwelche Ideen?

node.js express pug JMWhittaker
quelle
3
Sie vermissen einen Punkt .nach dem(type='text/javascript')
Warface
1
!!! 5ist veraltet, müssen Sie verwendendoctype html
Joaquinglezsantos

Antworten:

369

Verwenden Sie einfach ein 'Skript'-Tag mit einem Punkt danach.

script.
  var users = !{JSON.stringify(users).replace(/<\//g, "<\\/")}

https://github.com/pugjs/pug/blob/master/examples/dynamicscript.pug

Liangzan
quelle
Gute Lösung, aber es wird nur <script>statt produzieren <script type="text/javascript">.
Vojto
47
type="text/javascript"ist der Standardwert für das typeFeld für <script>Tags. Sie müssen es nicht einstellen.
Adam Fabicki
Was ist mit mehrzeiligem Code? Gibt es eine Möglichkeit, einen korrekten Codeeinzug in mein Javascript zu integrieren, wenn es auf diese Weise in Jade eingebettet ist?
fehlender Faktor
6
Jades Richtlinie wurde geändert. Das Inline-Skript-Tag sollte jetzt .angehängt sein. Also script.gefolgt von Ihrem eingerückten JS-Block.
Joeytwiddle
4
Dieses Beispiel ist eine Sicherheitsanfälligkeit bezüglich Skriptinjektion. Siehe github.com/visionmedia/jade/issues/1474
Jason Merrill
104

Der :javascriptFilter wurde in Version 7.0 entfernt

In den Dokumenten wird angegeben, dass Sie scriptjetzt ein Tag verwenden sollten, gefolgt von einem .Zeichen und keinem vorangestellten Leerzeichen.

Beispiel:

script.
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')

wird zu kompiliert

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
Felipe Sabino
quelle
Tag-Skript mit einem Punkt nach, gibt es in allen Javascript-Blöcken eine Möglichkeit, es ohne Zeilenumbrüche zu rendern?
Joaquinglezsantos
@ Joaquinglez nicht, dass ich weiß
Felipe Sabino
55

Verwenden Sie ein Skript-Tag mit dem angegebenen Typ. Fügen Sie es einfach vor dem Punkt ein:

script(type="text/javascript").
  if (10 == 10) {
    alert("working");
  }

Dies wird kompiliert zu:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
Stefan Jarina
quelle
1
nur script.wäre in Ordnung.
NoobTW
24

Kein Skript-Tag verwenden.

Lösung mit |:

script
  | if (10 == 10) {
  |   alert("working")
  | }

Oder mit einem .:

script.
  if (10 == 10) {
    alert("working")
  }
Olivier C.
quelle
6
Ich empfehle .. Andernfalls müssten Sie |in jede Zeile schreiben .
Ilyas Karim
2

DRITTE VERSION MEINER ANTWORT:

Hier ist ein mehrzeiliges Beispiel für Inline-Jade-Javascript. Ich glaube nicht, dass man es schreiben kann, ohne a zu verwenden -. Dies ist ein Beispiel für eine Flash-Nachricht, das ich teilweise verwende. Hoffe das hilft!

-if(typeof(info) !== 'undefined')
  -if (info)
    - if(info.length){
      ul
        -info.forEach(function(info){
          li= info
      -})
  -}

Ist der Code, den Sie erhalten möchten, um den Code in Ihrer Frage zu kompilieren?

Wenn ja, brauchen Sie nicht zwei Dinge: Erstens müssen Sie nicht deklarieren, dass es sich um Javascript / ein Skript handelt. Sie können einfach nach der Eingabe mit dem Codieren beginnen -. Zweitens müssen -ifSie nach der Eingabe nicht das {oder eingeben } auch nicht . Das macht Jade ziemlich süß.

-------------- ORIGINAL ANTWORT UNTEN ---------------

Versuchen Sie das Voranstellen ifmit -:

-if(10 == 10)
  //do whatever you want here as long as it's indented two spaces from
   the `-` above

Es gibt auch Tonnen von Jade-Beispielen bei:

https://github.com/visionmedia/jade/blob/master/examples/

JohnAllen
quelle
Danke John hat das für die ungerade einzelne Zeile verwendet, aber ich kann sowieso nicht sehen, dass mehrere Zeilen ausgeführt werden, ohne dass das '-' vorangestellt wird. Die Jade-Homepage ( Link enthält sogar ein Beispiel dafür, was ich versuche, aber es wird nicht kompiliert. Ich verwende auch die neueste Version.
JMWhittaker
Sie fragen sich also, wie Sie mehrere Zeilen Javascript-Code unter einer Zeile haben sollen, wenn?
JohnAllen
@Bluey gleich hier, ich habe das nie zum Laufen gebracht. Sie sollten zu den Github-Fragen fragen.
Markieren Sie
Mark, habe jetzt Sam Stephensons Eco anstelle von Jade verwendet. Ich habe Jade nur als schnelle Benutzeroberfläche zum Testen verwendet.
JMWhittaker
Mit Jade 0.12.4 kann ich ein Skript () erstellen, ohne dem JS - darunter voranzustellen.
Richard Holland
1

Für mehrzeiligen Inhalt verwendet Jade normalerweise ein "|":

Tags, die nur Text wie Skript, Stil und Textbereich akzeptieren, benötigen nicht das führende | Charakter

Das heißt, ich kann das Problem, das Sie haben, nicht reproduzieren. Wenn ich diesen Code in eine Jade-Vorlage einfüge, wird die richtige Ausgabe erstellt und beim Laden der Seite eine Warnung angezeigt.

JPanneel
quelle
0

Verwenden Sie den :javascriptFilter. Dadurch wird ein Skript-Tag generiert und der Skriptinhalt als CDATA maskiert:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
Chris B.
quelle
@aaaidan Du hast recht. Es wird von Scalate unterstützt (ich verwende es hier ohne Probleme: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ), aber es sieht so aus, als ob reine Jade dies nicht tut Unterstützen Sie es, da es hier nicht aufgeführt ist: github.com/visionmedia/jade#features . Das ist eine Schande!
Chris B
Ja, wäre schön gewesen. Wie die Top-Antwort sagt, script.funktioniert ein gut und ist legal!!! 5
aaaidan
0 
script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>
Ransomware0
quelle