Jak mogę renderować wbudowany JavaScript za pomocą Jade / Pug?

222

Próbuję uzyskać JavaScript do renderowania na mojej stronie przy użyciu Jade (http://jade-lang.com/)

Mój projekt jest w NodeJS z Express, wszystko działa poprawnie, dopóki nie chcę napisać wbudowanego JavaScript w głowie. Nawet biorąc przykłady z Jadeitowych dokumentów, nie mogę zmusić go do działania tego, czego mi brakuje?

Szablon Jade

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

Wynikowy renderowany HTML w przeglądarce

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

Coś zdecydowanie brakuje tutaj jakieś pomysły?

node.js express pug JMWhittaker
źródło
3
Brakuje kropki .po(type='text/javascript')
Warface,
1
!!! 5jest przestarzałe, musisz użyćdoctype html
Joaquinglezsantos

Odpowiedzi:

369

wystarczy użyć znacznika „script” z kropką po.

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

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

Liangzan
źródło
Dobre rozwiązanie, ale przyniesie tylko <script>zamiast <script type="text/javascript">.
Vojto
47
type="text/javascript"jest wartością domyślną typepola w <script>tagach. Nie musisz tego ustawiać.
Adam Fabicki,
Co z kodem wielowierszowym? Czy istnieje sposób na prawidłowe wcięcie kodu w moim JavaScript, gdy jest osadzony w Jade w ten sposób?
missingfaktor
6
Zmieniono zasady Jade, wewnętrzny tag skryptu powinien teraz mieć .dołączony dodatek. Więc script.następnie swojej urozmaiconej bryle JS.
joeytwiddle
4
Ten przykład dotyczy podatności na wstrzykiwanie skryptu. Zobacz github.com/visionmedia/jade/issues/1474
Jason Merrill
104

:javascriptFiltracyjny usunięto 7.0

Dokumenty mówią, że powinieneś scriptteraz użyć tagu, po którym następuje .znak bez spacji.

Przykład:

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

zostanie skompilowany do

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
Felipe Sabino
źródło
znacznik skryptu z kropką po, czy w całym bloku javascript jest jakiś sposób, który renderuje go bez znaków nowej linii?
Joaquinglezsantos
@Joaquinglez, że nie wiem
Felipe Sabino
55

Użyj znacznika skryptu z określonym typem, po prostu dołącz go przed kropką:

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

Spowoduje to kompilację do:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
Stefan Jarina
źródło
1
po prostu script.będzie dobrze.
NoobTW
24

Nie używaj tylko tagu skryptu.

Rozwiązanie z |:

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

Lub z .:

script.
  if (10 == 10) {
    alert("working")
  }
Olivier C.
źródło
6
Polecam .. W przeciwnym razie będziesz musiał pisać |w każdej linii.
Ilyas karim
2

TRZECIA WERSJA MOJEJ ODPOWIEDZI:

Oto wielowierszowy przykład wbudowanego Jade Javascript. Nie sądzę, że możesz to napisać bez użycia -. To przykładowy komunikat flash, którego używam częściowo. Mam nadzieję że to pomoże!

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

Czy kod, który próbujesz uzyskać, aby skompilować kod w swoim pytaniu?

Jeśli tak, nie potrzebujesz dwóch rzeczy: po pierwsze, nie musisz deklarować, że jest to JavaScript / skrypt, możesz po prostu zacząć pisać po wpisaniu -; Po drugie, po wpisaniu -ifnie trzeba wpisać {albo }albo. To sprawia, że ​​Jade jest całkiem słodka.

-------------- ORYGINALNA ODPOWIEDŹ PONIŻEJ ---------------

Spróbuj zrobić ifz -:

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

Istnieje również mnóstwo przykładów Jade na:

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

JohnAllen
źródło
Dzięki John użył tego do nieparzystej pojedynczej linii, ale nie widzę zresztą robienia wielu linii bez uprzedniego wstawienia go za pomocą „-”. Strona główna Jade ( link ma nawet przykład tego, co próbuję zrobić, ale nie można go skompilować. Używam również najnowszej wersji.
JMWhittaker
Pytasz więc, jak umieścić wiele wierszy kodu JavaScript pod jednym, jeśli?
JohnAllen
@Bluey to samo tutaj, nigdy nie dostałem tego do pracy. Powinieneś zapytać o kwestie związane z github.
Mark
Mark, teraz przestawiłem się na używanie Eco Sama Stephensona zamiast Jade. Użyłem jade jako szybkiego interfejsu użytkownika do testowania.
JMWhittaker
Jade 0.12.4 pozwala mi na tworzenie skryptów () bez uprzedniego przygotowania JS z - poniżej.
Richard Holland
1

W przypadku treści wieloliniowych jade zwykle używa znaku „|”, jednak:

Tagi, które akceptują tylko tekst, takie jak skrypt, styl i obszar tekstowy, nie potrzebują wiodących | postać

To powiedziawszy, nie mogę odtworzyć twojego problemu. Kiedy wklejam ten kod w szablonie jadeit, generuje on właściwe dane wyjściowe i wyświetla monit o załadowanie strony.

JPanneel
źródło
0

Użyj :javascriptfiltra. Spowoduje to wygenerowanie znacznika skryptu i uniknięcie zawartości skryptu jako CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
Chris B.
źródło
@ aaaidan Masz rację. Obsługuje go Scalate (używam go tutaj bez problemów: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ), ale wygląda na to, że czysty Jade nie ma wesprzyj go, ponieważ nie ma go tutaj: github.com/visionmedia/jade#features . Jaka szkoda!
Chris B
Tak, byłoby miło. Jak mówi najwyższa odpowiedź, script.działa dobrze i jest legalna!!! 5
aaaidan
0 
script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>
Ransomware0
źródło