ฉันจะแสดง JavaScript แบบอินไลน์ด้วย Jade / Pug ได้อย่างไร

222

ฉันพยายามรับ JavaScript เพื่อแสดงผลบนหน้าของฉันโดยใช้ Jade (http://jade-lang.com/)

โครงการของฉันอยู่ใน NodeJS ด้วย Express eveything ทำงานได้อย่างถูกต้องจนกว่าฉันต้องการเขียน JavaScript แบบอินไลน์ในหัว แม้แต่การยกตัวอย่างจากเอกสารหยกฉันไม่สามารถทำให้มันหายไปได้

แม่แบบหยก

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

แสดงผล HTML ในเบราว์เซอร์

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

สิ่งที่คิดถึงความคิดใด ๆ

node.js express pug

— JMWhittaker
แหล่งที่มา

3

คุณพลาดจุด.หลัง(type='text/javascript')

— Warface

1

!!! 5เลิกใช้แล้วคุณต้องใช้doctype html

— Joaquinglezsantos

369

เพียงใช้แท็ก 'สคริปต์' ด้วยจุดหลัง

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

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

— liangzan
แหล่งที่มา

ทางออกที่ดี แต่มันจะผลิตเพียงแทน<script> <script type="text/javascript">

— Vojto

47

type="text/javascript"เป็นค่าเริ่มต้นสำหรับtypeฟิลด์บน<script>แท็ก คุณไม่จำเป็นต้องตั้งค่า

— Adam Fabicki

สิ่งที่เกี่ยวกับรหัส multiline? มีวิธีการเยื้องรหัสที่เหมาะสมใน Javascript ของฉันเมื่อฝังใน Jade ด้วยวิธีนี้

— missingfaktor

6

นโยบายของ Jade เปลี่ยนไปแท็กสคริปต์แบบอินไลน์ควรมี.ต่อท้าย ดังนั้นscript.ตามบล็อกเยื้องของคุณ JS

— joeytwiddle

4

ตัวอย่างนี้เป็นช่องโหว่ในการฉีดสคริปต์ ดูgithub.com/visionmedia/jade/issues/1474

— Jason Merrill

104

:javascriptกรองจะถูกลบออกในรุ่น 7.0

เอกสารบอกว่าคุณควรใช้scriptแท็กในขณะนี้ตามด้วย.ถ่านและไม่มีช่องว่างก่อน

ตัวอย่าง:

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

จะถูกรวบรวมไปยัง

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

— เฟลิเป้ซาบิโน
แหล่งที่มา

แท็กสคริปต์ที่มีจุดหลังจากในบล็อก javascript ทุกวิธีมีวิธีการที่แสดงโดยไม่ขึ้นบรรทัดใหม่?

— Joaquinglezsantos

@Jaoquinglez ไม่ใช่ที่ฉันรู้

— Felipe Sabino

55

ใช้แท็กสคริปต์ตามประเภทที่ระบุเพียงรวมไว้ข้างหน้าจุด:

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

สิ่งนี้จะรวบรวมไปที่:

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

— Stefan Jarina
แหล่งที่มา

1

เพียงแค่script.จะไม่เป็นไร

— NoobTW

24

ไม่ใช้แท็กสคริปต์เท่านั้น

โซลูชันด้วย|:

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

หรือด้วย.:

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

— Olivier C
แหล่งที่มา

6

.ผมขอแนะนำให้ มิฉะนั้นคุณจะต้องเขียน|ในแต่ละบรรทัด

— Ilyas karim

2

รุ่นที่สามของคำตอบของฉัน:

นี่คือตัวอย่างของหลายบรรทัดของ Javascript Jade แบบอินไลน์ -ผมไม่คิดว่าคุณสามารถเขียนได้โดยไม่ต้องใช้ นี่คือตัวอย่างข้อความแฟลชที่ฉันใช้ในบางส่วน หวังว่านี่จะช่วยได้!

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

รหัสที่คุณพยายามรวบรวมรหัสในคำถามของคุณหรือไม่

ถ้าเป็นเช่นนั้นคุณไม่จำเป็นต้องสองสิ่งแรกที่คุณไม่จำเป็นต้องประกาศว่ามัน Javascript / สคริปต์คุณก็สามารถเริ่มต้นการเขียนโปรแกรมหลังจากการพิมพ์-; สองหลังจากที่คุณพิมพ์-ifคุณไม่จำเป็นต้องพิมพ์{หรือ }อย่างใดอย่างหนึ่ง นั่นคือสิ่งที่ทำให้หยกน่ารัก

-------------- คำตอบดั้งเดิมด้านล่าง ---------------

ลองเสริมifด้วย-:

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

นอกจากนี้ยังมีตัวอย่างหยกมากมายที่:

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

— JohnAllen
แหล่งที่มา

ขอบคุณ John ได้ใช้สิ่งนั้นกับบรรทัดเดี่ยวแปลก ๆ แต่ฉันไม่สามารถเห็นได้ว่าจะทำหลายบรรทัดโดยไม่ได้เตรียมไว้ด้วย '-' หน้าแรกของ Jade ( ลิงก์ยังมีตัวอย่างของสิ่งที่ฉันพยายามจะทำ แต่มันจะไม่คอมไพล์ฉันกำลังใช้รีลีสล่าสุดเช่นกัน

— JMWhittaker

ดังนั้นคุณถามว่าจะมีรหัส Javascript หลายบรรทัดด้านล่างหนึ่งถ้า?

— JohnAllen

@ Blue เดียวกันที่นี่ฉันไม่เคยได้รับสิ่งนี้ในการทำงาน คุณควรถามเกี่ยวกับปัญหา GitHub

— ทำเครื่องหมาย

มาร์คได้ย้ายไปใช้ Eco ของ Sam Stephenson แทน Jade ฉันใช้หยกเป็นเพียง UI ด่วนในการทดสอบเท่านั้น

— JMWhittaker

Jade 0.12.4 อนุญาตให้ฉันเขียนสคริปต์ () โดยไม่เติม JS ด้วย - ข้างล่าง

— Richard Holland

1

สำหรับหยกเนื้อหาหลายบรรทัดมักใช้ "|" อย่างไรก็ตาม:

แท็กที่ยอมรับเฉพาะข้อความเช่นสคริปต์สไตล์และ textarea ไม่จำเป็นต้องมีผู้นำ | ตัวละคร

สิ่งนี้กล่าวว่าฉันไม่สามารถทำซ้ำปัญหาที่คุณมี เมื่อฉันวางโค้ดนั้นในเทมเพลต Jade มันจะสร้างเอาต์พุตที่ถูกต้องและแจ้งเตือนให้ฉันทราบเมื่อโหลดหน้าเว็บ

— JPanneel
แหล่งที่มา

0

ใช้:javascriptตัวกรอง สิ่งนี้จะสร้างแท็กสคริปต์และหลีกเลี่ยงเนื้อหาสคริปต์เป็น CDATA:

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

— Chris B
แหล่งที่มา

@aaaidan คุณพูดถูก สนับสนุนโดย Scalate (ฉันใช้ที่นี่โดยไม่มีปัญหา: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/ … ) แต่ดูเหมือนว่า Jade บริสุทธิ์ไม่ได้ สนับสนุนมันเป็นมันไม่อยู่ที่นี่: github.com/visionmedia/jade#features นั่นเป็นความอัปยศ!

— Chris B

ใช่คงจะดี ดังที่คำตอบแรกบอกว่าscript.ทำงานได้ดีและถูกกฎหมาย!!! 5

— aaaidan

0

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

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

— Ransomware0
แหล่งที่มา