Comment rendre du JavaScript en ligne avec Jade / Pug ?

Question

Comment rendre du JavaScript en ligne avec Jade / Pug ?

Demandé el 2 de Mai, 2011: Quand la question a-t-elle été
42452 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

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

Mon projet est en 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 de la documentation de Jade, je n'arrive pas à le faire fonctionner, qu'est-ce que je rate ?

Modèle de jade

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

Rendu du 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>

Il y a définitivement quelque chose qui manque ici, des idées ?

Demandé el 2 de Mai, 2011 par JMWhittaker

5 votes

Il vous manque un point . après le (type='text/javascript')

Commenté el 25 de Novembre, 2015 par Warface

2 votes

!!! 5 est déprécié, vous devez utiliser doctype html

Commenté el 22 de Février, 2016 par Joaquinglezsantos

Answer 1

5 Réponses

Answer 2

417voto

liangzan Points 1733

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/packages/pug/examples/dynamicscript.pug

Répondu el 27 de Juillet, 2011 par liangzan (1733 Points )

0 votes

Bonne solution, mais elle ne produira que <script> au lieu de <script type="text/javascript"> .

Commenté el 13 de Juin, 2012 par Vojto

51 votes

type="text/javascript" est la valeur par défaut de l'option type champ sur <script> tags. Vous n'avez pas besoin de le définir.

Commenté el 18 de Décembre, 2012 par Adam Fabicki

0 votes

Qu'en est-il du code multiligne ? Existe-t-il un moyen d'obtenir une indentation correcte du code dans mon Javascript lorsqu'il est intégré dans Jade de cette manière ?

Commenté el 14 de Février, 2013 par missingfaktor

Afficher 4 autres commentaires

Answer 3

121voto

Felipe Sabino Points 7853

El :javascript Le filtre a été retiré en version 7.0

El Les docs disent vous devez utiliser un script maintenant, suivi d'une balise . et sans espace précédent.

Exemple :

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

sera compilé en

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

Répondu el 13 de Octobre, 2013 par Felipe Sabino (7853 Points )

1 votes

Tag script avec un point après, dans tout le bloc javascript, y a-t-il un moyen de le rendre sans nouvelles lignes ?

Commenté el 22 de Février, 2016 par Joaquinglezsantos

0 votes

Joaquinglez, pas que je sache.

Commenté el 22 de Février, 2016 par Felipe Sabino

Answer 4

62voto

Stefan Jarina Points 71

Utilisez la balise script avec le type spécifié, il suffit de l'inclure avant le point :

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

Cela se compile en :

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

Répondu el 5 de Avril, 2014 par Stefan Jarina (71 Points )

2 votes

Juste script. serait bien.

Commenté el 14 de Août, 2016 par NoobTW

Answer 5

3voto

JohnAllen Points 1522

TROISIÈME VERSION DE MA RÉPONSE :

Voici un exemple de plusieurs lignes de Jade Javascript en ligne. Je ne pense pas qu'il soit possible de l'écrire sans utiliser un fichier - . Il s'agit d'un exemple de message flash que j'utilise dans un partiel. J'espère que cela vous aidera !

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

Le code que vous essayez de faire compiler est-il celui de votre question ?

Si c'est le cas, vous n'avez pas besoin de deux choses : premièrement, vous n'avez pas besoin de déclarer que c'est Javascript/a script, vous pouvez simplement commencer à coder après avoir tapé - ; deuxièmement, après avoir tapé -if vous n'avez pas besoin de taper le { ou } soit. C'est ce qui rend Jade plutôt sympa.

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

Essayez d'ajouter au préalable if con - :

-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 de Jade sur le site :

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

Répondu el 2 de Mai, 2011 par JohnAllen (1522 Points )

0 votes

Merci John, je l'ai utilisé pour les lignes uniques, mais je ne vois pas comment faire des lignes multiples sans les faire précéder du '-'. La page d'accueil de Jade ( lien a même un exemple de ce que j'essaie de faire, mais il ne compile pas. J'utilise également la dernière version.

Commenté el 2 de Mai, 2011 par JMWhittaker

0 votes

Vous demandez donc comment avoir plusieurs lignes de code Javascript sous un seul if ?

Commenté el 2 de Mai, 2011 par JohnAllen

0 votes

@Bluey pareil, je n'ai jamais réussi à faire fonctionner ça. Vous devriez demander sur les problèmes github.

Commenté el 5 de Mai, 2011 par Mark

Afficher 3 autres commentaires

Answer 6

1voto

JPanneel Points 86

Pour un contenu de plusieurs lignes, Jade utilise normalement un "|", cependant :

Les balises qui n'acceptent que du texte, telles que script, style et textarea n'ont pas besoin de pas besoin du caractère de tête |.

Ceci dit, je ne peux pas reproduire le problème que vous rencontrez. Lorsque je colle ce code dans un modèle Jade, il produit le bon résultat et me signale une alerte au chargement de la page.

Répondu el 30 de Mai, 2011 par JPanneel (86 Points )

Comment rendre du JavaScript en ligne avec Jade / Pug ?

Modèle de jade

Rendu du HTML dans le navigateur

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment rendre du JavaScript en ligne avec Jade / Pug ?

Modèle de jade

Rendu du HTML dans le navigateur

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: