web-dev-qa-db-fra.com

Comment puis-je rendre JavaScript en ligne avec Jade / Pug?

J'essaie d'obtenir du rendu JavaScript sur ma page à l'aide de Jade (http://jade-lang.com/)

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

Modèle de jade

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

Résultat du rendu HTML 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 ne manque vraiment pas ici des idées?

node.jsexpresspug
210
JMWhittaker

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

344
liangzan

Le filtre :javascript a été supprimé de version 7.

Le docs dit vous devriez maintenant utiliser une balise script, suivie d'un . char et d'aucun 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>
100
Felipe Sabino

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 va compiler pour:

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

Aucune balise de script uniquement.

Solution avec |:

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

Ou avec un .:

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

TROISIEME VERSION DE MA REPONSE:

Voici un exemple à plusieurs lignes de Javascript en Jade intégré. 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 dans votre question?

Si tel est le cas, vous n'avez pas besoin de deux choses: tout d'abord, vous n'avez pas besoin de déclarer qu'il s'agit d'un script/script, vous pouvez simplement commencer à coder après avoir tapé -; Deuxièmement, après avoir tapé -if, vous n'avez pas besoin de taper { ni }. C'est ce qui rend Jade jolie.

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

Essayez de préfixer if avec -:

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

Il y a aussi des tonnes d'exemples de Jade sur:

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

3
JohnAllen

Pour le contenu multiligne, jade utilise normalement un "|", cependant:

Les balises qui acceptent uniquement du texte tel que script, style et textarea ne nécessitent pas le | personnage

Ceci dit, je ne peux pas reproduire le problème que vous rencontrez. Lorsque je colle ce code dans un modèle de jade, il génère le bon résultat et m'informe avec une alerte lors du chargement de la page.

1
JPanneel

Je vérifierais vos espaces blancs.

Vous pouvez également importer votre fichier JS en tant qu’inclusion. Je sais que ce n'est pas une réponse à ce qui ne va pas, mais vous trouverez qu'il est plus facile de déboguer votre JS puisque toute erreur finit par faire référence à un numéro de ligne dans un fichier qui est réel.

1
Arcabard

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

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