मैं जेड / पग के साथ इनलाइन जावास्क्रिप्ट कैसे प्रस्तुत कर सकता हूं?


222

मैं अपने पेज पर जेड (http://jade-lang.com/) का उपयोग करके प्रस्तुत करने के लिए जावास्क्रिप्ट प्राप्त करने की कोशिश कर रहा हूँ

मेरा प्रोजेक्ट एक्सप्रेस के साथ नोडज में है, जब तक मैं सिर में कुछ इनलाइन जावास्क्रिप्ट नहीं लिखना चाहता, तब तक eveything सही ढंग से काम कर रहा है। यहां तक ​​कि जेड डॉक्स से उदाहरण लेते हुए मैं यह काम नहीं कर सकता कि मुझे क्या याद आ रहा है?

जेड टेम्पलेट

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

सोमेथिंग्स निश्चित रूप से एक मिस यहाँ किसी भी विचार है?


3
आप एक बिंदु भूल रहे हैं .के बाद(type='text/javascript')
Warface

1
!!! 5पदावनत किया जाता है, आप का उपयोग करना चाहिएdoctype html
19a

जवाबों:


369

बस के बाद एक डॉट के साथ एक 'स्क्रिप्ट' टैग का उपयोग करें।

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

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


अच्छा समाधान, लेकिन यह केवल के <script>बजाय उत्पादन होगा <script type="text/javascript">
वोजतो

47
type="text/javascript"टैग typeपर फ़ील्ड के लिए डिफ़ॉल्ट मान है <script>। आपको इसे सेट करने की आवश्यकता नहीं है।
एडम फैबिकि

मल्टीलाइन कोड के बारे में क्या? क्या इस तरह जेड में एम्बेडेड होने पर मेरी जावास्क्रिप्ट में उचित कोड इंडेंटेशन का एक तरीका है?
लापताफैक्टर

6
जेड की नीति बदल गई, इनलाइन स्क्रिप्ट टैग को अब एक .जोड़ा जाना चाहिए । तो script.जेएस के अपने इंडेंट ब्लॉक के बाद।
joeytwiddle

4
वह उदाहरण एक स्क्रिप्ट इंजेक्शन भेद्यता है। देखें github.com/visionmedia/jade/issues/1474
जेसन मेरिल

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>

टैग स्क्रिप्ट के साथ एक डॉट के बाद, सभी जावास्क्रिप्ट ब्लॉक में कोई रास्ता नहीं है जो इसे बिना नईलाइन्स के प्रस्तुत करता है?
Joaquinglezsantos 12

@Joaquinglez नहीं कि मुझे पता है
फेलिप सबिनो

55

निर्दिष्ट प्रकार के साथ स्क्रिप्ट टैग का उपयोग करें, बस इसे डॉट से पहले शामिल करें:

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

यह करने के लिए संकलन करेंगे:

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

1
बस script.ठीक हो जाएगा।
NoobTW

24

केवल स्क्रिप्ट टैग का उपयोग न करें।

के साथ समाधान |:

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

या एक के साथ .:

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

6
मैं सलाह देता हूं .। अन्यथा आपको |प्रत्येक पंक्ति में लिखना होगा ।
इलियास करीम

2

मेरे उत्तर का तीसरा संस्करण:

यहाँ इनलाइन जेड जावास्क्रिप्ट का एक बहुस्तरीय उदाहरण है। मुझे नहीं लगता कि आप इसे बिना उपयोग किए लिख सकते हैं -। यह एक फ्लैश संदेश उदाहरण है जिसका उपयोग मैं एक आंशिक में करता हूं। उम्मीद है की यह मदद करेगा!

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

क्या वह कोड जिसे आप अपने प्रश्न में कोड संकलित करने के लिए प्राप्त करने का प्रयास कर रहे हैं?

यदि हां, तो आपको दो चीजों की आवश्यकता नहीं है: पहला, आपको यह घोषित करने की आवश्यकता नहीं है कि यह जावास्क्रिप्ट / एक स्क्रिप्ट है, आप बस टाइप करने के बाद कोडिंग शुरू कर सकते हैं -; दूसरा, टाइप करने के बाद आपको टाइप -ifकरने की जरूरत नहीं है {या } तो । यही कारण है कि जेड बहुत मीठा बनाता है।

-------------- मूल ANSWER कम ---------------

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/


धन्यवाद जॉन ने अजीब सिंगल लाइन के लिए उपयोग किया है, हालांकि मैं '-' के साथ इसे प्रस्तुत किए बिना कई लाइनों को करने के किसी भी तरह से नहीं देख सकता। जेड होमपेज ( लिंक में यह भी उदाहरण है कि मैं क्या करने की कोशिश कर रहा हूं, लेकिन यह संकलन नहीं करेगा। मैं नवीनतम रिलीज का भी उपयोग कर रहा हूं।
JMWhittaker

तो आप पूछ रहे हैं कि कैसे एक के नीचे जावास्क्रिप्ट कोड की कई लाइनें हैं अगर?
जॉन एलेन

@ यहाँ वही, मैं काम करने के लिए यह कभी नहीं मिला है। आपको गितुब मुद्दों पर पूछना चाहिए।
मार्क

मार्क, अब जेड के बजाय सैम स्टीफेंसन के ईको का उपयोग करने के लिए चले गए हैं। मैं केवल परीक्षण के लिए एक त्वरित यूआई के रूप में जेड का उपयोग कर रहा था।
JMWhittaker

जेड 0.12.4 मुझे जेएस के साथ - इसके नीचे - नीचे दिए बिना स्क्रिप्ट () की अनुमति देता है।
रिचर्ड हॉलैंड

1

बहु-पंक्ति सामग्री जेड के लिए सामान्य रूप से "|" का उपयोग किया जाता है, हालांकि:

टैग जो केवल पाठ को स्वीकार करते हैं जैसे कि स्क्रिप्ट, शैली, और textarea को अग्रणी की आवश्यकता नहीं है | चरित्र

इसने कहा, मैं आपको होने वाली समस्या को पुन: पेश नहीं कर सकता। जब मैं उस कोड को एक जेड टेम्पलेट में पेस्ट करता हूं, तो यह सही आउटपुट देता है और मुझे पेज-लोड पर अलर्ट के साथ संकेत देता है।


0

:javascriptफ़िल्टर का उपयोग करें । यह एक स्क्रिप्ट टैग उत्पन्न करेगा और CDATA के रूप में स्क्रिप्ट सामग्री से बच जाएगा:

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

@aaaidan तुम सही हो। यह स्कैलेट द्वारा समर्थित है (मैं इसका उपयोग बिना किसी समस्या के कर रहा हूं: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ) लेकिन यह शुद्ध जेड नहीं दिखता है इसका समर्थन करें, क्योंकि यह यहां सूचीबद्ध नहीं है: github.com/visionmedia/jade#features । कि एक शर्म की बात है!
क्रिस बी

हाँ, अच्छा होता। जैसा कि शीर्ष उत्तर कहता है, script.ठीक काम करता है, और कानूनी है!!! 5
एएएदान

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

//- Workaround
<script nonce="some-nonce">console.log("test");</script>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.