Bagaimana cara membuat JavaScript inline dengan Jade / Pug?

222

Saya mencoba membuat JavaScript untuk di-render di halaman saya menggunakan Jade (http://jade-lang.com/)

Proyek saya di NodeJS dengan Express, semuanya berjalan dengan benar sampai saya ingin menulis beberapa JavaScript inline di kepala. Bahkan dengan mengambil contoh-contoh dari dokumen Jade saya tidak dapat membuatnya bekerja apa yang saya lewatkan?

Templat jade

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

Menghasilkan HTML yang dirender di browser

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

Pasti ada yang terlewat di sini ide?

node.js express pug JMWhittaker
sumber
3
Anda kehilangan satu titik .setelah(type='text/javascript')
Warface
1
!!! 5sudah usang, Anda harus menggunakandoctype html
Joaquinglezsantos

Jawaban:

369

cukup gunakan tag 'script' dengan titik setelahnya.

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

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

liangzan
sumber
Baik solusi, tetapi akan menghasilkan hanya <script>bukan <script type="text/javascript">.
Vojto
47
type="text/javascript"adalah nilai default untuk typebidang pada <script>tag. Anda tidak perlu mengaturnya.
Adam Fabicki
Bagaimana dengan kode multiline? Apakah ada cara untuk memiliki lekukan kode yang tepat di Javascript saya ketika tertanam di Jade dengan cara ini?
missingfaktor
6
Kebijakan Jade berubah, tag skrip inline sekarang seharusnya sudah .ditambahkan. Maka script.diikuti oleh blok JS yang terindentasi.
joeytwiddle
4
Contoh itu adalah kerentanan injeksi skrip. Lihat github.com/visionmedia/jade/issues/1474
Jason Merrill
104

The :javascriptFilter telah dihapus di versi 7.0

The docs mengatakan Anda harus menggunakan scripttag sekarang, diikuti dengan .char dan tidak ada ruang sebelumnya.

Contoh:

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

akan dikompilasi ke

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
Felipe Sabino
sumber
tag skrip dengan titik setelah, di semua blok javascript apakah ada cara yang membuatnya tanpa baris baru?
Joaquinglezsantos
@ Joquinglez bukan yang saya tahu
Felipe Sabino
55

Gunakan tag skrip dengan jenis yang ditentukan, cukup sertakan sebelum titik:

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

Ini akan dikompilasi ke:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
Stefan Jarina
sumber
1
hanya script.akan baik-baik saja.
NoobTW
24

Tidak menggunakan tag skrip saja.

Solusi dengan |:

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

Atau dengan .:

script.
  if (10 == 10) {
    alert("working")
  }
Olivier C
sumber
6
Saya merekomendasikan .. Kalau tidak, Anda harus menulis |di setiap baris.
Ilyas karim
2

VERSI KETIGA DARI JAWABAN SAYA:

Berikut adalah beberapa contoh baris inline Jade Javascript. Saya tidak berpikir Anda bisa menulisnya tanpa menggunakan -. Ini adalah contoh pesan kilat yang saya gunakan secara parsial. Semoga ini membantu!

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

Apakah kode yang Anda coba untuk mengkompilasi kode dalam pertanyaan Anda?

Jika demikian, Anda tidak perlu dua hal: pertama, Anda tidak perlu menyatakan bahwa itu Javascript / skrip, Anda dapat mulai mengkode setelah mengetik -; kedua, setelah Anda mengetik, -ifAnda tidak perlu mengetik {atau }salah satunya. Itulah yang membuat Jade cukup manis.

-------------- JAWABAN ASLI DI BAWAH ---------------

Coba mulai ifdengan -:

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

Ada juga banyak contoh Jade di:

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

John Allen
sumber
Terima kasih John telah menggunakannya untuk baris tunggal yang aneh, namun saya tetap tidak bisa melihat melakukan beberapa baris tanpa menambahkannya dengan '-'. Beranda Jade ( tautan bahkan memiliki contoh tentang apa yang saya coba lakukan, tetapi itu tidak dapat dikompilasi. Saya juga menggunakan rilis terbaru
JMWhittaker
Jadi Anda bertanya bagaimana memiliki beberapa baris kode Javascript di bawah satu jika?
JohnAllen
@Bluey sama di sini, saya tidak pernah mendapatkan ini berfungsi. Anda harus bertanya tentang masalah github.
Markus
Mark, sekarang pindah ke menggunakan Eco Sam Stephenson bukan Jade. Saya hanya menggunakan jade sebagai UI cepat untuk pengujian.
JMWhittaker
Jade 0.12.4 memungkinkan saya untuk skrip () tanpa menambahkan JS dengan - di bawahnya.
Richard Holland
1

Untuk konten multi-baris, biasanya giok menggunakan "|", namun:

Tag yang hanya menerima teks seperti skrip, gaya, dan textarea tidak perlu terdepan | karakter

Ini mengatakan, saya tidak dapat mereproduksi masalah yang Anda alami. Ketika saya menempelkan kode itu dalam templat batu giok, itu menghasilkan output yang tepat dan meminta saya dengan peringatan pada memuat halaman.

JPanneel
sumber
0

Gunakan :javascriptfilter. Ini akan menghasilkan tag skrip dan keluar dari konten skrip sebagai CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
Chris B
sumber
@aaaidan Anda benar. Ini didukung oleh Scalate (saya menggunakannya di sini tanpa masalah: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ) tetapi sepertinya Jade murni tidak mendukungnya, karena tidak tercantum di sini: github.com/visionmedia/jade#features . Itu memalukan!
Chris B
Ya, pasti menyenangkan. Seperti kata jawaban teratas, script.berfungsi dengan baik, dan legal!!! 5
aaaidan
0 
script(nonce="some-nonce").
  console.log("test");

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