Jade / Pug ile satır içi JavaScript'i nasıl oluşturabilirim?

222

Jade'i kullanarak sayfamda görüntülenmesi için JavaScript almaya çalışıyorum (http://jade-lang.com/)

Projem Express ile NodeJS'de, kafanın içinde satır içi JavaScript yazmak isteyene kadar her şey doğru çalışıyor. Yeşim belgelerinden örnekler bile alsam neyi kaçırdım?

Yeşim şablonu

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

Oluşturulan HTML tarayıcıda sonuçlandı

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

Kesinlikle burada bir fikir özledim mi?

node.js express pug

— JMWhittaker
kaynak

3

.(type='text/javascript')

— Warface'ten

1

!!! 5kullanımdan kaldırılmışsa, kullanmalısınızdoctype html

— Joaquinglezsantos

369

sonra nokta içeren bir 'script' etiketi kullanmanız yeterlidir.

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

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

— liangzan
kaynak

İyi bir çözüm, ancak bunun <script>yerine üretecek <script type="text/javascript">.

— Vojto

47

type="text/javascript"etiketlerdeki typealan için varsayılan değerdir <script>. Ayarlamanıza gerek yok.

— Adam Fabicki

Çok satırlı kod ne olacak? Bu şekilde Jade'e gömüldüğümde Javascript'imde uygun kod girintisine sahip olmanın bir yolu var mı?

— missingfaktor

6

Jade'in politikası değişti, şimdi satır içi komut dosyası etiketinin .eklenmesi gerekiyor. Bunu script.girintili JS bloğunuz izler.

— joeytwiddle

4

Bu örnek bir komut dosyası enjeksiyon güvenlik açığıdır. Bkz. Github.com/visionmedia/jade/issues/1474

— Jason Merrill

104

:javascriptFiltre çıkarıldı sürüm 7.0

Docs diyor bir kullanmalıdır scriptbir takip şimdi etiketi, .char ve hiçbir önceki uzay.

Misal:

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

derlenecek

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

— Felipe Sabino
kaynak

tag script sonra bir nokta ile, tüm javascript blok satırsonu olmadan render herhangi bir yolu var mı?

— Joaquinglezsantos

@Joaquinglez bilmediğim değil

— Felipe Sabino

55

Belirtilen türde komut dosyası etiketini kullanın, noktadan önce ekleyin:

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

Bu derleme:

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

— Stefan Jarina
kaynak

1

sadece iyi script.olurdu.

— NoobTW

24

Yalnızca komut dosyası etiketi kullanmayın.

Çözüm |:

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

Veya aşağıdakilerle .:

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

— Olivier C
kaynak

6

Ben tavsiye ederim .. Aksi takdirde |her satıra yazmanız gerekir .

— Ilyas karim

2

CEVAPIMIN ÜÇÜNCÜ SÜRÜMÜ:

İşte satır içi Jade Javascript için çok satırlı bir örnek. Bunu kullanmadan yazabileceğini sanmıyorum -. Bu, kısmi olarak kullandığım bir flash mesaj örneğidir. Bu yardımcı olur umarım!

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

Almak istediğiniz kod sorunuzdaki kodu derliyor mu?

Eğer öyleyse, iki şeye ihtiyacınız yoktur: birincisi, Javascript / script olduğunu beyan etmeniz gerekmez, yazdıktan sonra kodlamaya başlayabilirsiniz -; ikinci olarak, yazdıktan sonra ya da -ifyazmanız gerekmez . Jade'i tatlı yapan da budur.{}

-------------- AŞAĞIDAKİ ORİJİNAL CEVAP ---------------

Prepending deneyin ifile -:

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

Ayrıca tonlarca Yeşim örneği vardır:

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

— JohnAllen
kaynak

Teşekkürler John bunu tek tek satır için kullandı, ancak yine de '-' ile eklemeden birden fazla satır yapmayı göremiyorum. Jade ana sayfası ( link , ne yapmaya çalıştığımın bir örneğine sahip, ancak derlenmeyecek. En son sürümü de kullanıyorum.

— JMWhittaker

Peki, eğer birden fazla Javascript kodu satırının bir tane altında olmasını istersiniz?

— JohnAllen

@Bluey burada aynı, bunu işe yaramadım. Github konularını sormalısınız.

— Mark

Mark, şimdi Jade yerine Sam Stephenson's Eco'yu kullanmaya başladı. Test için hızlı bir kullanıcı arayüzü olarak yeşim kullanıyordum.

— JMWhittaker

Jade 0.12.4 altında JS ile - eklemeden script () sağlar.

— Richard Holland

1

Çok satırlı içerik için yeşim taşı normalde "|" kullanır, ancak:

Yalnızca komut dosyası, stil ve metin alanı gibi metinleri kabul eden etiketler için başa gerek yoktur | karakter

Bu, yaşadığınız sorunu yeniden üretemiyorum dedi. Bu kodu bir yeşim şablonuna yapıştırdığımda, doğru çıktıyı üretir ve sayfa yükleme konusunda beni uyarır.

— JPanneel
kaynak

0

:javascriptFiltreyi kullanın . Bu bir komut dosyası etiketi oluşturur ve komut dosyası içeriğinden CDATA olarak kaçar:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body

— Chris B
kaynak

@aaaidan Haklısın. Scalate tarafından destekleniyor (burada sorunsuz kullanıyorum: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ) ama saf Jade yok gibi görünüyor burada listelenmediği için destekleyin: github.com/visionmedia/jade#features . Bu utanç verici!

— Chris B

Evet, güzel olurdu. Üst cevabın dediği gibi, iyi script.çalışıyor ve yasal!!! 5

— aaaidan

0

script(nonce="some-nonce").
  console.log("test");

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

— Ransomware0
kaynak