คำอธิบายของ <script type =“ text / template”> … </script>

456

ฉันสะดุดสิ่งที่ฉันไม่เคยเห็นมาก่อน ในแหล่งที่มาของแอปพลิเคชันตัวอย่างของ Backbone.js ( ตัวอย่างแบ็กโบน TODO ) พวกเขามีเทมเพลตอยู่ภายใน<script type = "text/template"></script>ซึ่งมีรหัสที่ดูเหมือน PHP แต่มีแท็ก JavaScript

มีคนอธิบายเรื่องนี้กับฉันได้ไหม ถูกกฎหมายหรือไม่

— ด้าน
แหล่งที่มา

คำถามและคำตอบที่ดี ฉันเพิ่งพบเคล็ดลับนี้ในรหัสกรอบแอป YUI ใหม่: new.yuilibrary.com/yui/docs/app/app-todo.html

— mjhm

4

สิ่งที่เกี่ยวกับtype="text/tcl"ที่ผมเห็นในเอกสารของ W3C ? วิธีใช้งาน (ฉันควรถามคำถามอื่นได้หรือไม่)

— L01man

3

@ L01man ใช่คุณควรถามคำถามอื่น

— Nate Glenn

ลิงก์ YUI ของ mjhm ตอนนี้ที่: yuilibrary.com/yui/docs/app/app-todo.html

— gpvos

413

แท็กสคริปต์เหล่านั้นเป็นวิธีทั่วไปในการใช้งานฟังก์ชันการสร้างเทมเพลต (เช่นใน PHP) แต่ในฝั่งไคลเอ็นต์

การตั้งค่าประเภทเป็น "text / template" ไม่ใช่สคริปต์ที่เบราว์เซอร์สามารถเข้าใจได้ดังนั้นเบราว์เซอร์ก็จะไม่สนใจมัน สิ่งนี้ช่วยให้คุณสามารถใส่อะไรลงไปในนั้นซึ่งสามารถแยกได้ในภายหลังและใช้งานโดยไลบรารี่เทมเพลตเพื่อสร้างโค้ด HTML

Backbone ไม่ได้บังคับให้คุณใช้ไลบรารี่เทมเพลตใด ๆ โดยเฉพาะ: หนวด , Haml , Eco , เทมเพลต Google Offและอื่น ๆ ( เทมเพลตที่ใช้ในตัวอย่างที่คุณเชื่อมโยงกับunderscore.js ) สิ่งเหล่านี้จะใช้ไวยากรณ์ของตัวเองเพื่อให้คุณเขียนภายในแท็กสคริปต์เหล่านั้น

— เดวิดถัง
แหล่งที่มา

22

@ แมทว่า ในขณะเดียวกันก็สามารถเรียกดูข้อความแบบเต็มได้อีกครั้งโดยใช้.innerHTMLงานได้ง่าย

— David Tang

1

นั่นไม่ได้เป็นเพียงข่าวที่น่าอัศจรรย์! ฉันกำลังมองหาวิธีแก้ปัญหาเช่นนี้ขอบคุณสำหรับการตอบสนองและการติดตามของคุณ!

— Matt

7

สวัสดีแมตต์ที่แตกต่างกันที่นี่ <script type = "text / template"> ผ่านการทดสอบการตรวจสอบ HTML หรือไม่

— แมตต์

17

มองไปข้างหน้าเพื่อ<template />แท็ก html5rocks.com/th/tutorials/webcomponents/template & caniuse.com/#search=template

— Volker E.

5

สวัสดีจากอนาคต <template>อยู่ที่นี่ แต่ไซต์ต่างๆยังคงใช้เทคนิคนี้เช่น reddit.com : F

— Victor Zamanian

114

มันถูกต้องและมีประโยชน์มาก!

ลองสิ่งนี้:

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

ไลบรารีเทมเพลต Javascript จำนวนมากใช้เทคนิคนี้ Handlebars.jsเป็นตัวอย่างที่ดี

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

5

คุณจะแจ้งเตือนนี้ใน javascript แบบ raw ด้วย jquery ได้อย่างไร

— สั่น

3

@tremor คุณหมายถึง raw javascript หรือเปล่า? บางสิ่งเช่น: var el = document.getElementById ('hello'); var html = el.textContent; การแจ้งเตือน (HTML); (คุณจะต้องพิจารณาเพิ่มเติมเกี่ยวกับการประมวลผลข้อความของแท็กสคริปต์ใน IE)

— SgtPooki

@SgtPooki ya ฉันหมายถึงโดยไม่ต้องขอบคุณสำหรับคำตอบ สิ่งที่ฉันอยากทำคือ src สคริปต์นั้นไปยังไฟล์ภายนอกและรับมัน แต่ฉันพบว่ามันเป็นไปไม่ได้จริงๆ .. ดังนั้นตอนนี้ฉันกำลังดำน้ำใน AJAX และ socket.io ตอนนี้

— สั่น

@tremor ฉันอาจไม่เข้าใจสิ่งที่คุณพยายามทำ แต่การจับไฟล์ภายนอกแบบไดนามิกเพื่อเรียกใช้หรือแยกเป็นเทมเพลตเป็นไปได้แน่นอน ตรวจสอบ requirejs

— SgtPooki

@tremor หากคุณต้องการดึงไฟล์ภายนอกแบบไดนามิกฉันควรใช้ XHR มากกว่าแท็กสคริปต์ XHR ยังทำงานร่วมกับการตอบกลับ HTML ธรรมดา ... หรืออย่างอื่นสำหรับเรื่องนี้

— Jeroen Landheer

26

โดยการตั้งค่าแท็กสคริปต์typeอื่นที่ไม่ใช่text/javascriptเบราว์เซอร์จะไม่เรียกใช้รหัสภายในของแท็กสคริปต์ สิ่งนี้เรียกว่าไมโครเทมเพลต แนวคิดนี้ใช้กันอย่างแพร่หลายในแอปพลิเคชันหน้าเดียว (aka SPA)

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

text/templateสำหรับไมโครแม่แบบชนิดของแท็กสคริปต์ มันอธิบายได้เป็นอย่างดีโดยผู้สร้าง Jquery John Resig http://ejohn.org/blog/javascript-micro-templating/

— Fizer Khan
แหล่งที่มา

ทรัพยากรที่ดีที่คุณรวม ลิงค์นั้นสอนให้ฉันเยอะ

— rocktheartsm4l

13

วิธีเพิ่มคำตอบของ Box9:

Backbone.js ขึ้นอยู่กับ underscore.js ซึ่งใช้ microtemplates ดั้งเดิมของ John Resig

หากคุณตัดสินใจที่จะใช้ Backbone.js กับ Rails อย่าลืมตรวจสอบอัญมณี Jammit เป็นวิธีที่สะอาดมากในการจัดการบรรจุภัณฑ์สำหรับเทมเพลต http://documentcloud.github.com/jammit/#jst

ตามค่าเริ่มต้น Jammit ยังใช้ไมโครเทมเพลตของ JResig อีกด้วย แต่มันยังช่วยให้คุณสามารถเปลี่ยนเอนจิ้น templating

— Andrew De Andrade
แหล่งที่มา

ในการเพิ่ม DocumentCloud ซึ่งให้บริการ Jammit เป็น บริษัท เดียวกันกับที่พัฒนา Backbone และ Underscore

— Ceasar Bautista

12

เป็นวิธีเพิ่มข้อความใน HTML โดยไม่ต้องแสดงผลหรือทำให้เป็นมาตรฐาน

มันไม่ต่างไปจากการเพิ่มเช่น:

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

— เคอร์เนลเจมส์
แหล่งที่มา

32

มันแตกต่างกัน textarea จะยังคงแทรกองค์ประกอบเหล่านั้นใน DOM และดึงเนื้อหาภายนอกใด ๆ (เช่นภาพ) ที่ร้องขอ แท็กสคริปต์จะไม่

— LocalPCGuy

13

@LocalPCGuy ที่ไม่เป็นความจริงรวมถึง<img src="image.jpg">ใน textarea จะไม่ทำให้เบราว์เซอร์ดึงข้อมูลimage.jpgเบราว์เซอร์รู้ว่าเนื้อหาภายใน textarea นั้นไม่ได้ถูกสร้างขึ้นมา

— vikki

5

@vikki woops คุณถูกต้อง textarea อาจเป็นหนึ่งในองค์ประกอบสองสามอย่างที่จะใช้แทนแท็กสคริปต์เทมเพลตได้

— LocalPCGuy

4

@LocalPCGuy ใช่ฉันคิดว่าทั้งสองสามารถใช้ interchangebly หากเทมเพลตของคุณมีบรรทัดที่</script>คุณไม่สามารถใช้งานได้ภายในแท็กสคริปต์ดังนั้นคุณสามารถใช้ textarea นั้นและในทางกลับกัน

— vikki

2

ใช่ ... ก่อนที่แท็กแม่แบบและก่อนสคริปต์ type = text / template เราทุกคนทำด้วย textarea ฉันเชื่อว่า มันเป็นสิ่งเดียวกันกับ iframes เมื่อเราไม่มีอาแจ็กซ์

— dkellner

11

<script type = “text/template”> … </script>ล้าสมัยแล้ว ใช้<template>แท็กแทน

— Reza Salarmehr
แหล่งที่มา

9

<template>แท็กยังคงไม่ได้รับการสนับสนุนโดย Internet Explorer เป็นของ IE 11

— ovinophile

87

ในเวลา 5 ปีให้ใช้แท็ก <template>

— superluminary

13

— dagnelies

10

อย่าใช้แท็ก <template> และอย่าตัดสินใจตามสิ่งอื่นที่เป็น "ล้าสมัย" นี่ไม่ใช่งานสัปดาห์แฟชั่นมิลานถ้ามีอะไรที่ใช้งานได้และเหมาะสมทางเทคนิคก็สามารถใช้ได้ :) ตอนนี้จริง: แท็ก <template> ยังไม่ได้รับการสนับสนุนใน IE และ Opera Mini (ตาม CanIUse) และแท็ก <script> จะ ถือสิ่งที่คุณให้ไว้ตรงข้ามกับ div ที่ซ่อนอยู่หรือแท็กอื่น ๆ ที่อาจสูญเสียช่องว่างหรือความคิดเห็นของคุณ

— 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/

— Niels Heidenreich
แหล่งที่มา

3

jQuery.template ถูกยกเลิกและตามมาด้วยการjsviews.com/#jsrender

— doekman