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

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