<Script type = "text / template"> ... </ script> का स्पष्टीकरण

456

मैंने अभी कुछ ऐसा किया है जो मैंने पहले कभी नहीं देखा। Backbone.js के उदाहरण TODO एप्लिकेशन ( Backbone TODO उदाहरण ) के स्रोत में उनके पास एक के अंदर अपने टेम्पलेट थे <script type = "text/template"></script>, जिसमें कोड था जो PHP से बाहर कुछ दिखता है लेकिन जावास्क्रिप्ट टैग के साथ।

क्या कोई मुझे ये समझा सकता है? क्या यह वैध है?

— मैट
स्रोत

बढ़िया सवाल और जवाब। मैं अभी इस ट्रिक को नए YUI ऐप फ्रेमवर्क कोड में चला रहा हूं: new.yuilibrary.com/yui/docs/app/app-todo.html

— mjhm

4

किस बारे में type="text/tcl"मैंने W3C डॉक में देखा था ? इसका इस्तेमाल कैसे करें? (क्या मुझे एक और प्रश्न पूछना चाहिए?)

— L01man

3

@ L01man हाँ, आपको एक और सवाल पूछना चाहिए।

— नैट ग्लेन

mjhm का YUI लिंक अभी यहां: yuilibrary.com/yui/docs/app/app-todo.html

— gpvos

413

वे स्क्रिप्ट टैग टेम्प्लेटिंग कार्यक्षमता (जैसे PHP) को लागू करने का एक सामान्य तरीका है, लेकिन क्लाइंट की तरफ।

"टेक्स्ट / टेम्प्लेट" के प्रकार को सेट करके, यह ऐसी स्क्रिप्ट नहीं है जिसे ब्राउज़र समझ सकता है, और इसलिए ब्राउज़र बस इसे अनदेखा कर देगा। यह आपको वहाँ कुछ भी डालने की अनुमति देता है, जिसे बाद में एचटीएमएल स्निपेट उत्पन्न करने के लिए एक टेम्प्लेटिंग लाइब्रेरी द्वारा उपयोग किया जा सकता है।

बैकबोन आपको किसी विशेष टेम्प्लेटिंग लाइब्रेरी का उपयोग करने के लिए मजबूर नहीं करता है - वहां काफी कुछ हैं: मूंछें , हमल , ईको , Google क्लोजर टेम्पलेट , और इसी तरह (उदाहरण में आपके द्वारा लिंक किए गए एक का उपयोग अंडरस्कोर है । जेएस )। इन स्क्रिप्ट टैग के भीतर लिखने के लिए ये आपके अपने सिंटैक्स का उपयोग करेंगे।

— डेविड टैंग
स्रोत

22

@ मैट, बिल्कुल। उसी समय इसका उपयोग करके फिर से पूर्ण पाठ को पुनः प्राप्त करना आसान है .innerHTML, इसलिए यह अब टेंपलेटिंग इंजनों के बीच आम बात है।

— डेविड टैंग

1

खैर यह सिर्फ शानदार खबर नहीं है! मैं इस तरह एक समाधान के लिए देख रहा हूँ .. आपकी प्रतिक्रिया और अनुवर्ती के लिए धन्यवाद!

— मैट

7

नमस्ते, यहाँ अलग मैट। क्या स्क्रिप्ट का प्रकार = "टेक्स्ट / टेम्प्लेट"> HTML सत्यापन परीक्षण पास करेगा?

— मैट

17

<template />टैग के लिए आगे देख रहे हैं । html5rocks.com/en/tutorials/webcomponents/template और caniuse.com/#search=template

— वोल्कर ई

5

भविष्य से नमस्ते। <template>यहाँ है, लेकिन साइटें अभी भी इस तकनीक का उपयोग कर रही हैं, जैसे कि reddit.com। : एफ

— विक्टर ज़मानियन

114

यह कानूनी और बहुत आसान है!

इसे इस्तेमाल करे:

<script id="hello" type="text/template">
  Hello world
</script>
<script>
  alert($('#hello').html());
</script>

कई जावास्क्रिप्ट टेम्प्लेटिंग लाइब्रेरी इस तकनीक का उपयोग करती हैं। Handlebars.js एक अच्छा उदाहरण है।

— Rimian
स्रोत

5

आप इस चेतावनी को जावास्क्रिप्ट के साथ कच्ची जावास्क्रिप्ट में कैसे करेंगे?

— कांप

3

@ ट्रेमर क्या आपका मतलब कच्ची जावास्क्रिप्ट में बिना गुड़ के होता है? कुछ इस तरह: var el = document.getElementById ('हैलो'); var html = el.textContent; चेतावनी (एचटीएमएल); (आपको आईई में स्क्रिप्ट टैग के टेक्स्ट को आगे देखने की आवश्यकता होगी)

— 19

@SgtPooki फिर मैं बिना मतलब के, उत्तर के लिए धन्यवाद। मैं वास्तव में क्या करना चाहूंगा कि उस स्क्रिप्ट को एक बाहरी फ़ाइल में ले जाए और उसे प्राप्त कर ले, लेकिन मैंने पाया है कि यह वास्तव में संभव नहीं है .. इसलिए मैं AJAX और सॉकेट में गोता लगा रहा हूं।

— कांप

@tremor, मुझे समझ में नहीं आ रहा है कि आप क्या करने की कोशिश कर रहे हैं, लेकिन बाहरी फ़ाइलों को गतिशील रूप से हथियाने, या तो चलाने के लिए या टेम्पलेट के रूप में पार्स करने के लिए, निश्चित रूप से संभव है। आवश्यकता की जाँच करें।

— SgtPooki

@tremor यदि आप बाहरी फ़ाइलों को गतिशील रूप से खींचना चाहते हैं, तो मैं स्क्रिप्ट टैग के बजाय XHR का उपयोग करना चाहूंगा। XHR सादे HTML प्रतिक्रियाओं के साथ भी काम करता है ... या उस मामले के लिए कुछ और।

— जीरो लैंडर

26

स्क्रिप्ट टैग की स्थापना करके typeअलावा अन्य text/javascript, ब्राउज़र स्क्रिप्ट टैग के आंतरिक कोड निष्पादित नहीं होंगे। इसे माइक्रो टेम्प्लेट कहा जाता है। यह अवधारणा सिंगल पेज एप्लिकेशन (उर्फ एसपीए) में व्यापक रूप से उपयोग की जाती है।

<script type="text/template">I am a Micro template. 
  I am going to make your web page faster.</script>

माइक्रो टेम्पलेट के लिए, स्क्रिप्ट टैग का प्रकार है text/template। यह बहुत अच्छी तरह से Jquery निर्माता जॉन Resig http://ejohn.org/blog/javascript-micro-templating/ द्वारा समझाया गया है

— फेनर खान
स्रोत

महान संसाधन आप शामिल हैं। उस लिंक ने मुझे बहुत कुछ सिखाया।

— रॉकथिएर्ट्सम

13

Box9 के जवाब में जोड़ने के लिए:

Backbone.js अंडरस्कोर।जेएस पर निर्भर है, जो खुद जॉन रेजिग के मूल माइक्रोटेमप्लेट को लागू करता है।

यदि आप रेलबोन के साथ Backbone.js का उपयोग करने का निर्णय लेते हैं, तो जममिट रत्न की जाँच अवश्य करें। यह टेम्पलेट्स के लिए परिसंपत्ति पैकेजिंग का प्रबंधन करने के लिए एक बहुत ही स्वच्छ तरीका प्रदान करता है। http://documentcloud.github.com/jammit/#jst

डिफ़ॉल्ट रूप से Jammit JResig के माइक्रोटेम्पलेट का भी उपयोग करता है, लेकिन यह आपको टेम्प्लेटिंग इंजन को बदलने की अनुमति भी देता है।

— एंड्रयू डी एंड्रेड
स्रोत

जोड़ने के लिए, DocumentCloud, जो Jammit प्रदान करता है, वही कंपनी है जिसने बैकबोन और अंडरस्कोर विकसित किया है।

— सीज़र

12

यह HTML का पाठ जोड़ने का एक तरीका है, इसके बिना इसका प्रतिपादन या सामान्यीकरण किया जा सकता है।

इसे जोड़ने से अलग नहीं है:

 <textarea style="display:none"><span>{{name}}</span></textarea>

— कर्नेल जेम्स
स्रोत

32

यह अलग है, एक textarea अभी भी उन तत्वों को DOM में सम्मिलित करेगा और अनुरोध की गई किसी भी बाहरी संपत्ति (जैसे चित्र) को लाएगा। एक स्क्रिप्ट टैग नहीं होगा।

— लोकलपीसीग्युय

13

@LocalPCGuy सही नहीं है, <img src="image.jpg">एक टेक्‍स्‍टेरिया के अंदर सहित ब्राउज़र को लाने के लिए कारण नहीं होगा image.jpg, ब्राउज़र जानता है कि एक टेक्‍स्‍टेरिया के अंदर की सामग्री को रेंडर करने के लिए नहीं है।

— विक्की

5

@vikki woops, आप सही हैं, textarea उन कुछ तत्वों में से एक हो सकता है जो स्क्रिप्ट टैग टेम्प्लेटिंग के लिए एक व्यवहार्य प्रतिस्थापन होगा।

— लोकलपीसीग्युय

4

@LocalPCGuy हाँ, मुझे लगता है कि उन दोनों का इस्तेमाल इंटरचेंज किया जा सकता है। यदि आपके टेम्प्लेट में वह रेखा है जिसे </script>आप स्क्रिप्ट टैग के अंदर उपयोग नहीं कर सकते हैं, तो आप टैक्स्टेरिया का उपयोग कर सकते हैं, और इसके विपरीत।

— विक्की

2

युप ... टेम्प्लेट टैग से पहले और स्क्रिप्ट टाइप = टेक्स्ट / टेम्प्लेट से पहले, हम सभी ने टेक्स्टारिया के साथ किया, मुझे विश्वास है। जब आइजैक्स नहीं था, तो इफ्रेम के साथ भी यही बात है।

— dkellner

11

<script type = “text/template”> … </script>अप्रचलित है। <template>इसके बजाय टैग का उपयोग करें ।

— रजा सलामहर
स्रोत

9

<template>टैग अभी भी IE 11 के रूप में इंटरनेट एक्सप्लोरर द्वारा समर्थित नहीं है

— ovinophile

87

5 साल के समय में <टेम्पलेट> टैग का उपयोग करें।

— 13-27

13

— डेगनेलिस

9

<टेम्प्लेट> टैग का उपयोग न करें, और कुछ और "अप्रचलित" होने के आधार पर अपना निर्णय न करें। यह मिलान फैशन वीक नहीं है, अगर कुछ काम कर रहा है और तकनीकी रूप से उचित है, तो इसका इस्तेमाल किया जा सकता है :) अब असली के लिए: <टेम्पलेट> टैग अभी भी IE और ओपेरा मिनी (CanIUse के अनुसार) में असमर्थित है, और <स्क्रिप्ट> टैग होगा एक छिपी हुई डिव या किसी अन्य टैग के विपरीत, जिसे आप अपने व्हाट्सएप या टिप्पणियों को खो सकते हैं, ठीक उसी तरह रखें जो आप देते हैं।

— dkellner

3

जवाब पोस्ट किए जाने के 2 साल बाद, IE11 अपने आप में एक अप्रचलित तकनीक है, और Microsoft ने इसके बजाय एज को स्थानांतरित कर दिया है, जो समर्थन करते हैं <template>। अधिकांश प्रमुख डेस्कटॉप ब्राउज़र में इस <template>टैग का समर्थन है । मैं दृढ़ता से अब के रूप में उपयोग करने की सलाह देता हूं। developer.mozilla.org/en/docs/Web/HTML/Element/…

— Yeo

3

jQuery के टेम्प्लेट कुछ ऐसे उदाहरण हैं जो HTML को संग्रहीत करने के लिए इस पद्धति का उपयोग करते हैं जो कि सीधे अन्य (HTML के अंदर) पूरे रेंडर को प्रस्तुत नहीं किया जाएगा: http://api.jquery.com/jQuery.template/

— नील्स हेडेनरिच
स्रोत

3

jQuery.template को छोड़ दिया गया है, और jsviews.com/#jsrender

— doekman