it-swarm.com.de

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

Ich versuche, mithilfe von Jade (http://jade-lang.com/) JavaScript zum Rendern auf meiner Seite 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 sie nicht zum Laufen bringen. Was fehle ich?

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>

Irgendetwas fehlt hier definitiv eine Idee?

210
JMWhittaker

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

344
liangzan

Das :javascript Filter wurde in Version 7. entfernt

Das docs says Sie sollten jetzt ein script -Tag verwenden, gefolgt von einem . char und kein vorangestelltes Leerzeichen.

Beispiel:

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

wird kompiliert zu

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
100
Felipe Sabino

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 um:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
47
Stefan Jarina

Kein Skript-Tag verwenden.

Lösung mit |:

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

Oder mit einem .:

script.
  if (10 == 10) {
    alert("working")
  }
22
Olivier C

DRITTE VERSION MEINER ANTWORT:

Hier ist ein mehrzeiliges Beispiel für Inline-Jade-Javascript. Ich glaube nicht, dass Sie es schreiben können, ohne einen - Zu verwenden. Dies ist ein Beispiel für eine Flash-Nachricht, die 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 versuchen, den Code in Ihrer Frage zu kompilieren?

In diesem Fall brauchen Sie keine zwei Dinge: Erstens müssen Sie nicht deklarieren, dass es sich um Javascript/ein Skript handelt. Sie können einfach mit dem Codieren beginnen, nachdem Sie - Eingegeben haben. Zweitens müssen Sie nach der Eingabe von -if weder { noch } eingeben. Das ist es, was Jade so süß macht.

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

Versuchen Sie, if mit - Voranzustellen:

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

Es gibt auch Unmengen von Jade-Beispielen bei:

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

3
JohnAllen

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

Tags, die nur Text wie Script, Style und Textarea akzeptieren, benötigen kein führendes | 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 Warnmeldung angezeigt.

1
JPanneel

Ich würde Ihre Leerzeichen überprüfen.

Sie können Ihre JS-Datei auch als Include einbinden. Ich weiß, es ist keine Antwort auf das, was falsch läuft, aber Sie werden es einfacher finden, Ihr JS zu debuggen, da alle Fehler sich auf eine Zeilennummer in einer Datei beziehen, die echt ist.

1
Arcabard

Verwenden Sie die :javascript Filter. Dadurch wird ein Skript-Tag generiert und der Skriptinhalt als CDATA ausgeblendet:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
0
Chris B
script(nonce="some-nonce").
  console.log("test");

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