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

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