Come posso rendere JavaScript inline con Jade / Pug?

222

Sto cercando di ottenere JavaScript per il rendering sulla mia pagina utilizzando Jade (http://jade-lang.com/)

Il mio progetto è in NodeJS con Express, tutto funziona correttamente fino a quando non voglio scrivere un codice JavaScript incorporato nella testa. Anche prendendo gli esempi dai documenti di Jade non riesco a farlo funzionare cosa mi sto perdendo?

Modello di giada

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

HTML di rendering risultante nel 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>

Qualcosa sicuramente manca qui qualche idea?

node.js express pug

— JMWhittaker
fonte

3

Ti manca un punto .dopo il(type='text/javascript')

— Warface,

1

!!! 5è deprecato, è necessario utilizzaredoctype html

— Joaquinglezsantos il

369

usa semplicemente un tag 'script' con un punto dopo.

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

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

— liangzan
fonte

Buona soluzione, ma produrrà solo <script>invece di <script type="text/javascript">.

— Vojto,

47

type="text/javascript"è il valore predefinito per il typecampo sui <script>tag. Non è necessario impostarlo.

— Adam Fabicki,

Che dire del codice multilinea? C'è un modo per avere un rientro del codice corretto nel mio Javascript quando incorporato in Jade in questo modo?

— missingfaktor

6

La politica di Jade è cambiata, ora il tag dello script inline dovrebbe essere .aggiunto. Quindi script.seguito dal tuo blocco rientrato di JS.

— joeytwiddle,

4

Quell'esempio è una vulnerabilità di iniezione di script. Vedi github.com/visionmedia/jade/issues/1474

— Jason Merrill

104

Il :javascriptfiltro è stato rimosso nella versione 7.0

La documentazione dice che dovresti usare un scripttag ora, seguito da un .carattere e senza spazio precedente.

Esempio:

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

sarà compilato in

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

— Felipe Sabino
fonte

tag script con un punto dopo, in tutto il blocco JavaScript esiste un modo per renderlo senza newline?

— Joaquinglezsantos,

@Joaquinglez non che io conosca

— Felipe Sabino,

55

Usa il tag script con il tipo specificato, includilo semplicemente prima del punto:

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

Questo compilerà per:

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

— Stefan Jarina
fonte

1

solo script.andrebbe bene.

— NoobTW

24

Non utilizzare solo tag script.

Soluzione con |:

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

O con un .:

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

— Olivier C
fonte

6

Mi raccomando .. Altrimenti dovresti scrivere |in ogni riga.

— Ilyas karim

2

TERZA VERSIONE DELLA MIA RISPOSTA:

Ecco un esempio di più righe di Jade Javascript in linea. Non penso che tu possa scriverlo senza usare a -. Questo è un esempio di messaggio flash che uso in modo parziale. Spero che questo ti aiuti!

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

Il codice che stai cercando di compilare è il codice nella tua domanda?

Se è così, non hai bisogno di due cose: in primo luogo, non è necessario dichiarare che è Javascript / uno script, puoi semplicemente iniziare a scrivere codice dopo aver digitato -; secondo, dopo aver digitato -ifnon è necessario digitare {né l' }uno né l'altro. Questo è ciò che rende Jade piuttosto dolce.

-------------- RISPOSTA ORIGINALE SOTTO ---------------

Prova a effettuare la prepending ifcon -:

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

Ci sono anche tonnellate di esempi di giada a:

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

— JohnAllen
fonte

Grazie John l'ho usato per la singola riga dispari, tuttavia non riesco a vedere comunque di fare più righe senza anteporre con '-'. La homepage (Jade collegamento ha anche un esempio di quello che sto cercando di fare, ma non si compila Sto usando l'ultima versione anche..

— JMWhittaker

Quindi stai chiedendo come avere più righe di codice Javascript al di sotto di una se?

— John Allen,

@Bluey stesso qui, non l'ho mai fatto funzionare. Dovresti chiedere sui problemi di github.

— Segna

Mark, ora sono passati all'utilizzo dell'Eco di Sam Stephenson invece di Jade. Stavo usando jade solo come interfaccia utente rapida per i test.

— JMWhittaker,

Jade 0.12.4 mi permette di scrivere () senza anteporre JS con - sotto di esso.

— Richard Holland,

1

Per il contenuto multilinea, la giada utilizza normalmente un "|", tuttavia:

I tag che accettano solo testo come script, stile e textarea non hanno bisogno del carattere | carattere

Detto questo, non riesco a riprodurre il problema che stai riscontrando. Quando incollo quel codice in un modello di giada, produce l'output giusto e mi richiede un avviso sul caricamento della pagina.

— JPanneel
fonte

0

Usa il :javascriptfiltro Ciò genererà un tag di script e sfuggirà al contenuto dello script come CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body

— Chris B
fonte

@aaaidan Hai ragione. È supportato da Scalate (lo sto usando qui senza problemi: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ) ma sembra che Jade puro non lo faccia supportalo perché non è elencato qui: github.com/visionmedia/jade#features . È un peccato!

— Chris B,

Sì, sarebbe stato carino. Come dice la risposta in alto, script.funziona benissimo ed è legale!!! 5

— aaaidan,

0

script(nonce="some-nonce").
  console.log("test");

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

— Ransomware0
fonte