Comment rendre le JavaScript en ligne avec Jade / Pug?

222

J'essaie d'obtenir JavaScript pour afficher sur ma page en utilisant Jade (http://jade-lang.com/)

Mon projet est dans NodeJS avec Express, tout fonctionne correctement jusqu'à ce que je veuille écrire du JavaScript en ligne dans la tête. Même en prenant les exemples des documents Jade, je ne peux pas le faire fonctionner, qu'est-ce qui me manque?

Modèle de jade

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

HTML rendu résultant dans le navigateur

<!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>

Quelque chose manque vraiment ici des idées?

node.js express pug JMWhittaker
la source
3
Vous manquez un point .après le(type='text/javascript')
Warface
1
!!! 5est obsolète, vous devez utiliserdoctype html
Joaquinglezsantos

Réponses:

369

utilisez simplement une balise «script» avec un point après.

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

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

liangzan
la source
Bonne solution, mais elle ne produira qu'au <script>lieu de <script type="text/javascript">.
Vojto
47
type="text/javascript"est la valeur par défaut du typechamp sur les <script>balises. Vous n'avez pas besoin de le régler.
Adam Fabicki
Qu'en est-il du code multiligne? Existe-t-il un moyen d'avoir une indentation de code appropriée dans mon Javascript lorsqu'il est intégré à Jade de cette façon?
missingfaktor
6
La politique de Jade a changé, la balise de script en ligne devrait maintenant avoir une .annexe. Alors script.suivi de votre bloc en retrait de JS.
joeytwiddle
4
Cet exemple est une vulnérabilité d'injection de script. Voir github.com/visionmedia/jade/issues/1474
Jason Merrill
104

Le :javascriptfiltre a été supprimé dans la version 7.0

La documentation indique que vous devez utiliser une scriptbalise maintenant, suivie d'un caractère .et sans espace précédent.

Exemple:

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

sera compilé pour

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
Felipe Sabino
la source
script de balise avec un point après, dans tous les blocs javascript, y a-t-il un moyen de le rendre sans retour à la ligne?
Joaquinglezsantos
@Joaquinglez pas que je sache
Felipe Sabino
55

Utilisez une balise de script avec le type spécifié, incluez-la simplement avant le point:

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

Cela se compilera pour:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
Stefan Jarina
la source
1
ce script.serait bien.
NoobTW
24

Ne pas utiliser de balise de script uniquement.

Solution avec |:

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

Ou avec un .:

script.
  if (10 == 10) {
    alert("working")
  }
Olivier C
la source
6
Je recommande .. Sinon, vous devrez écrire |dans chaque ligne.
Ilyas karim
2

TROISIÈME VERSION DE MA RÉPONSE:

Voici un exemple sur plusieurs lignes de Javascript Jade en ligne. Je ne pense pas que vous puissiez l'écrire sans utiliser un -. Ceci est un exemple de message flash que j'utilise dans un partiel. J'espère que cela t'aides!

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

Le code que vous essayez d'obtenir pour le compiler est-il dans votre question?

Si c'est le cas, vous n'avez pas besoin de deux choses: d'abord, vous n'avez pas besoin de déclarer que c'est Javascript / un script, vous pouvez simplement commencer à coder après avoir tapé -; deuxièmement, après avoir tapé, -ifvous n'avez pas besoin de taper le {ou l'un ou l' }autre. C'est ce qui rend Jade assez doux.

-------------- RÉPONSE ORIGINALE CI-DESSOUS ---------------

Essayez d'ajouter ifau préalable -:

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

Il existe également des tonnes d'exemples Jade sur:

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

JohnAllen
la source
Merci, John a utilisé cela pour la ligne unique impaire, mais je ne vois pas de toute façon faire plusieurs lignes sans le faire précéder du «-». La page d'accueil de Jade (le lien contient même un exemple de ce que j'essaie de faire, mais il ne se compilera pas. J'utilise également la dernière version.
JMWhittaker
Vous demandez donc comment avoir plusieurs lignes de code Javascript en dessous d'une si?
JohnAllen
@Bluey même ici, je ne l'ai jamais fait fonctionner. Vous devriez poser des questions sur les problèmes de github.
Mark
Mark, a maintenant choisi d'utiliser Eco de Sam Stephenson au lieu de Jade. J'utilisais uniquement le jade comme interface utilisateur rapide pour les tests.
JMWhittaker
Jade 0.12.4 me permet de script () sans ajouter le JS avec - en dessous.
Richard Holland
1

Pour le contenu multi-lignes, le jade utilise normalement un "|", cependant:

Les balises qui n'acceptent que du texte tel que le script, le style et la zone de texte n'ont pas besoin du premier | personnage

Cela dit, je ne peux pas reproduire le problème que vous rencontrez. Lorsque je colle ce code dans un modèle jade, il produit la bonne sortie et m'invite avec une alerte au chargement de la page.

JPanneel
la source
0

Utilisez le :javascriptfiltre. Cela générera une balise de script et échappera le contenu du script en tant que CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
Chris B
la source
@aaaidan Vous avez raison. Il est pris en charge par Scalate (je l'utilise ici sans aucun problème: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ) mais il semble que le Jade pur ne fonctionne pas le prendre en charge, car il n'est pas répertorié ici: github.com/visionmedia/jade#features . C'est une honte!
Chris B
Ouais, ça aurait été sympa. Comme le dit la meilleure réponse, une script.amende fonctionne bien et est légale!!! 5
aaaidan
0 
script(nonce="some-nonce").
  console.log("test");

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