¿Cómo puedo renderizar JavaScript en línea con Jade / Pug?

222

Estoy tratando de obtener JavaScript para renderizar en mi página usando Jade (http://jade-lang.com/)

Mi proyecto está en NodeJS con Express, todo funciona correctamente hasta que quiero escribir un JavaScript en línea en la cabeza. Incluso tomando los ejemplos de los documentos de Jade, no puedo hacer que funcione, ¿qué me estoy perdiendo?

Plantilla de jade

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

HTML procesado resultante en el navegador

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

Algo definitivamente una señorita aquí alguna idea?

node.js express pug JMWhittaker
fuente
3
Que se está perdiendo un punto .después de la(type='text/javascript')
Warface
1
!!! 5está en desuso, debe usardoctype html
Joaquinglezsantos

Respuestas:

369

simplemente use una etiqueta 'script' con un punto después.

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

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

liangzan
fuente
Buena solución, pero producirá solo en <script>lugar de <script type="text/javascript">.
Vojto
47
type="text/javascript"es el valor predeterminado para el typecampo en las <script>etiquetas. No necesitas configurarlo.
Adam Fabicki
¿Qué pasa con el código multilínea? ¿Hay alguna manera de tener una sangría de código adecuada en mi Javascript cuando está incrustado en Jade de esta manera?
missingfaktor
66
La política de Jade cambió, la etiqueta del script en línea ahora debería tener un .anexo. Entonces, script.seguido de su bloque sangrado de JS.
joeytwiddle
44
Ese ejemplo es una vulnerabilidad de inyección de script. Ver github.com/visionmedia/jade/issues/1474
Jason Merrill el
104

El :javascriptfiltro se eliminó en la versión 7.0

La documentación dice que debe usar una scriptetiqueta ahora, seguida de un .carácter y sin espacios anteriores.

Ejemplo:

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

será compilado a

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
Felipe Sabino
fuente
script de etiqueta con un punto después, en todo el bloque javascript, ¿hay alguna forma de representarlo sin nuevas líneas?
Joaquinglezsantos
@Joaquinglez no que yo sepa
Felipe Sabino
55

Use la etiqueta de script con el tipo especificado, simplemente inclúyala antes del punto:

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

Esto se compilará para:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
Stefan Jarina
fuente
1
solo script.estaría bien
NoobTW
24

No use solo la etiqueta de script.

Solución con |:

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

O con un .:

script.
  if (10 == 10) {
    alert("working")
  }
Olivier C
fuente
66
Recomiendo .. De lo contrario, tendría que escribir |en cada línea.
Ilyas karim
2

TERCERA VERSIÓN DE MI RESPUESTA:

Aquí hay un ejemplo de varias líneas de Javascript en línea Jade. No creo que puedas escribirlo sin usar a -. Este es un ejemplo de mensaje flash que uso de forma parcial. ¡Espero que esto ayude!

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

¿Es el código que intenta obtener para compilar el código en su pregunta?

Si es así, no necesita dos cosas: primero, no necesita declarar que es Javascript / a script, simplemente puede comenzar a codificar después de escribir -; segundo, después de escribir -ifno necesita escribir el {o }ninguno. Eso es lo que hace que Jade sea muy dulce.

-------------- RESPUESTA ORIGINAL ABAJO ---------------

Intenta anteponer ifcon -:

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

También hay toneladas de ejemplos de Jade en:

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

JohnAllen
fuente
Gracias John lo ha usado para la línea única impar, sin embargo, no puedo ver de todos modos hacer varias líneas sin anteponerlo con el '-'. La página principal Jade ( enlace tiene incluso un ejemplo de lo que estoy tratando de hacer, pero no se compilará estoy usando la última versión también..
JMWhittaker
Entonces, ¿está preguntando cómo tener varias líneas de código Javascript debajo de una?
JohnAllen
@Azul igual aquí, nunca he conseguido que esto funcione. Debes preguntar sobre los problemas de github.
Marque
Mark, ahora ha pasado a usar Eco de Sam Stephenson en lugar de Jade. Solo estaba usando jade como una interfaz de usuario rápida para las pruebas.
JMWhittaker
Jade 0.12.4 me permite hacer un script () sin anteponer el JS con - debajo de él.
Richard Holland
1

Para contenido multilínea, jade normalmente usa un "|", sin embargo:

Las etiquetas que aceptan solo texto como script, estilo y área de texto no necesitan el encabezado | personaje

Dicho esto, no puedo reproducir el problema que tienes. Cuando pego ese código en una plantilla de jade, produce el resultado correcto y me muestra una alerta al cargar la página.

JPanneel
fuente
0

Usa el :javascriptfiltro. Esto generará una etiqueta de script y escapará del contenido del script como CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
Chris B
fuente
@aaaidan Tienes razón. Es compatible con Scalate (lo estoy usando aquí sin problemas: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ) pero parece que Jade puro no admitirlo , ya que no está listado aquí: github.com/visionmedia/jade#features . ¡Es una pena!
Chris B
Sí, hubiera sido lindo. Como dice la respuesta principal, a script.funciona bien y es legal!!! 5
aaaidan
0 
script(nonce="some-nonce").
  console.log("test");

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