Como renderizar JavaScript embutido com Jade / Pug?

222

Estou tentando fazer o JavaScript renderizar na minha página usando Jade (http://jade-lang.com/)

Meu projeto está no NodeJS com Express, eveything está funcionando corretamente até que eu queira escrever algum JavaScript embutido na cabeça. Mesmo tirando os exemplos dos documentos de Jade, não consigo fazer funcionar o que estou perdendo?

Modelo de jade

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

HTML renderizado resultante no 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>

Alguma coisa definitivamente falta aqui alguma idéia?

node.js express pug JMWhittaker
fonte
3
Você está perdendo um ponto .após o(type='text/javascript')
Warface
1
!!! 5é obsoleto, você deve utilizardoctype html
Joaquinglezsantos

Respostas:

369

basta usar uma tag 'script' com um ponto depois.

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

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

liangzan
fonte
Boa solução, mas produzirá apenas em <script>vez de <script type="text/javascript">.
Vojto 13/06
47
type="text/javascript"é o valor padrão para o typecampo nas <script>tags. Você não precisa configurá-lo.
Adam Fabicki
E o código multilinha? Existe uma maneira de ter um recuo de código adequado no meu Javascript quando incorporado no Jade dessa maneira?
missingfaktor
6
A política de Jade mudou, a tag de script embutido agora deve ter um .anexo. Então, script.seguido pelo seu bloco recortado de JS.
precisa saber é o seguinte
4
Esse exemplo é uma vulnerabilidade de injeção de script. Veja github.com/visionmedia/jade/issues/1474
Jason Merrill
104

O :javascriptfiltro foi removido na versão 7.0

Os documentos dizem que você deve usar uma scripttag agora, seguida por um .caractere e nenhum espaço anterior.

Exemplo:

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

será compilado para

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
Felipe Sabino
fonte
tag script com um ponto depois, em todo bloco javascript existe alguma maneira de renderizá-lo sem novas linhas?
Joaquinglezsantos 22/02
@Joaquinglez não que eu saiba
Felipe Sabino
55

Use a tag de script com o tipo especificado, basta incluí-la antes do ponto:

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

Isso será compilado para:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
Stefan Jarina
fonte
1
apenas script.estaria bem.
precisa saber é o seguinte
24

Não use somente tag de script.

Solução com |:

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

Ou com um . :

script.
  if (10 == 10) {
    alert("working")
  }
Olivier C
fonte
6
Eu recomendo .. Caso contrário, você teria que escrever |em cada linha.
Ilyas karim
2

TERCEIRA VERSÃO DA MINHA RESPOSTA:

Aqui está um exemplo de várias linhas de Javascript Jade embutido. Eu não acho que você pode escrever sem usar a -. Este é um exemplo de mensagem instantânea que eu uso em parte. Espero que isto ajude!

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

O código que você está tentando compilar é na sua pergunta?

Nesse caso, você não precisa de duas coisas: primeiro, não precisa declarar que é Javascript / um script, você pode apenas começar a codificar após digitar -; segundo, depois de digitar, -ifvocê não precisa digitar o {ou }qualquer um. Isso é o que faz Jade muito doce.

-------------- RESPOSTA ORIGINAL ABAIXO ---------------

Tente anexar ifcom -:

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

Existem também vários exemplos de Jade em:

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

JohnAllen
fonte
Obrigado, John usou isso para a única linha ímpar, no entanto, não consigo ver nenhuma maneira de fazer várias linhas sem acrescentá-la com o '-'. A página inicial do Jade (o link ainda tem um exemplo do que estou tentando fazer, mas não será compilado. Também estou usando a versão mais recente.
JMWhittaker
Então você está perguntando como ter várias linhas de código Javascript abaixo de uma se?
JohnAllen
@ Azul mesmo aqui, eu nunca consegui isso funcionar. Você deve perguntar sobre os problemas do github.
Mark
Mark, agora passaram a usar o Eco de Sam Stephenson em vez de Jade. Eu estava apenas usando o jade como uma interface rápida para testar.
JMWhittaker
O Jade 0.12.4 me permite script () sem preceder o JS com - abaixo dele.
Richard Holland
1

Para conteúdo de várias linhas, o jade normalmente usa um "|", no entanto:

Marcas que aceitam apenas texto, como script, estilo e área de texto, não precisam dos principais | personagem

Dito isto, não consigo reproduzir o problema que você está tendo. Quando colo esse código em um modelo de jade, ele produz a saída correta e solicita um alerta no carregamento da página.

JPanneel
fonte
0

Use o :javascriptfiltro. Isso irá gerar uma tag de script e escapar do conteúdo do script como CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
Chris B
fonte
@aaaidan Você está certo. É suportado pelo Scalate (estou usando aqui sem problemas: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ), mas parece que o puro Jade não apoie-o, pois não está listado aqui: github.com/visionmedia/jade#features . Isso é uma vergonha!
Chris B
Sim, teria sido legal. Como a resposta superior diz, uma script.fina funciona, e é legal!!! 5
aaaidan
0 
script(nonce="some-nonce").
  console.log("test");

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