Penjelasan dari <script type = "text / template"> ... </script>

456

Saya baru saja menemukan sesuatu yang belum pernah saya lihat sebelumnya. Dalam sumber aplikasi TODO contoh Backbone.js ( Contoh TODO Backbone ) mereka memiliki template di dalam a <script type = "text/template"></script>, yang berisi kode yang terlihat seperti sesuatu dari PHP tetapi dengan tag JavaScript.

Adakah yang bisa menjelaskan hal ini kepada saya? Apakah ini sah?

javascript templates types backbone.js underscore.js Mat
sumber
Pertanyaan dan jawaban yang bagus. Saya baru saja menemukan trik ini dalam kode Kerangka Aplikasi YUI yang baru: new.yuilibrary.com/yui/docs/app/app-todo.html
mjhm
4
Bagaimana dengan type="text/tcl"yang saya lihat di dokumen W3C ? Bagaimana cara menggunakannya? (Haruskah saya mengajukan pertanyaan lain?)
L01man
3
@ L01man ya, Anda harus mengajukan pertanyaan lain.
Nate Glenn
Tautan YUI mjhm sekarang di: yuilibrary.com/yui/docs/app/app-todo.html
gpvos

Jawaban:

414

Tag skrip tersebut adalah cara umum untuk menerapkan fungsi templating (seperti dalam PHP) tetapi di sisi klien.

Dengan mengatur jenis ke "teks / templat", itu bukan skrip yang bisa dipahami oleh peramban, dan peramban itu akan mengabaikannya. Ini memungkinkan Anda untuk meletakkan apa pun di sana, yang kemudian dapat diekstraksi kemudian dan digunakan oleh pustaka templating untuk menghasilkan cuplikan HTML.

Backbone tidak memaksa Anda untuk menggunakan perpustakaan templating tertentu - ada beberapa di luar sana: kumis , Haml , Eco , templat Google Penutupan , dan sebagainya (yang digunakan dalam contoh yang Anda tautkan adalah underscore.js ). Ini akan menggunakan sintaks mereka sendiri untuk Anda tulis di dalam tag skrip tersebut.

David Tang
sumber
22
@ Mat, persis seperti itu. Pada saat yang sama mudah untuk mengambil teks penuh lagi menggunakan .innerHTML, karenanya sudah umum sekarang di antara mesin templating.
David Tang
1
Bukankah itu berita yang luar biasa saja! Saya sudah mencari solusi seperti ini .. Terima kasih atas tanggapan dan tindak lanjutnya!
Matt
7
hai, Matt berbeda di sini. Apakah <script type = "text / template"> lulus tes verifikasi html?
Matt
17
Menantikan <template />tag. html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template
Volker E.
5
Halo dari masa depan. <template>ada di sini, tetapi situs masih menggunakan teknik ini, seperti reddit.com. : F
Victor Zamanian
114

Ini sah dan sangat berguna!

Coba ini:

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

Beberapa perpustakaan templating Javascript menggunakan teknik ini. Handlebars.js adalah contoh yang bagus.

Rimian
sumber
5
Bagaimana Anda melakukan lansiran ini dalam javascript mentah dengan jquery?
tremor
3
@tremor Maksud Anda dalam javascript mentah tanpa jquery? Sesuatu seperti: var el = document.getElementById ('hello'); var html = el.textContent; waspada (html); (Anda harus melihat lebih jauh ke dalam pemrosesan teks tag skrip di IE)
SgtPooki
@ SGTPooki ya saya maksud tanpa, terima kasih atas jawabannya. Yang benar-benar ingin saya lakukan adalah src script itu ke file eksternal dan mendapatkannya, tetapi saya telah menemukan itu tidak benar-benar mungkin .. jadi saya menyelam ke AJAX dan socket.io sekarang.
tremor
@tremor, saya mungkin tidak mengerti persis apa yang Anda coba lakukan, tetapi mengambil file eksternal secara dinamis, untuk dijalankan atau diurai sebagai templat, sudah pasti dimungkinkan. Lihat kebutuhan.
SgtPooki
@tremor Jika Anda ingin menarik file eksternal secara dinamis, saya lebih suka menggunakan XHR daripada tag skrip. XHR juga berfungsi dengan respons HTML biasa ... atau apa pun juga.
Jeroen Landheer
26

Dengan menetapkan tag skrip typeselain text/javascript, browser tidak akan menjalankan kode internal tag skrip. Ini disebut template mikro. Konsep ini banyak digunakan dalam aplikasi halaman tunggal (alias SPA).

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

Untuk template mikro, jenis tag skrip adalah text/template. Hal ini dijelaskan dengan sangat baik oleh pencipta Jquery John Resig http://ejohn.org/blog/javascript-micro-templating/

Fizer Khan
sumber
Sumber daya hebat yang Anda masukkan. Tautan itu mengajari saya banyak hal.
rocktheartsm4l
13

Untuk menambah jawaban Box9:

Backbone.js bergantung pada underscore.js, yang dengan sendirinya mengimplementasikan mikrotemplat asli John Resig.

Jika Anda memutuskan untuk menggunakan Backbone.js dengan Rails, pastikan untuk memeriksa permata Jammit. Ini memberikan cara yang sangat bersih untuk mengelola kemasan aset untuk templat. http://documentcloud.github.com/jammit/#jst

Secara default Jammit juga menggunakan mikrotemplates JResig, tetapi juga memungkinkan Anda untuk mengganti mesin templating.

Andrew De Andrade
sumber
Untuk menambahkan, DocumentCloud, yang menyediakan Jammit, adalah perusahaan yang sama yang mengembangkan Backbone dan Underscore.
Ceasar Bautista
12

Ini adalah cara menambahkan teks ke HTML tanpa dirender atau dinormalisasi.

Tidak ada bedanya dengan menambahkannya seperti:

 <textarea style="display:none"><span>{{name}}</span></textarea>
Kernel James
sumber
32
Berbeda, textarea masih akan memasukkan elemen-elemen itu ke dalam DOM dan mengambil aset eksternal apa pun (seperti gambar) yang diminta. Tag skrip tidak akan.
LocalPCGuy
13
@LocalPCGuy itu tidak benar, termasuk <img src="image.jpg">di dalam textarea tidak akan menyebabkan browser mengambil image.jpg, browser tahu bahwa konten di dalam textarea tidak dimaksudkan untuk dirender.
vikki
5
@vikki woops, Anda benar, textarea mungkin salah satu dari beberapa elemen yang akan menjadi pengganti templating tag skrip yang layak.
LocalPCGuy
4
@LocalPCGuy ya saya pikir keduanya bisa digunakan secara bergantian. Jika templat Anda memiliki garis, </script>Anda tidak dapat menggunakannya di dalam tag skrip, jadi Anda dapat menggunakan textarea lalu, dan sebaliknya.
vikki
2
Yup ... Sebelum tag templat dan sebelum jenis skrip = teks / templat, kami semua melakukannya dengan textarea, saya percaya. Itu sama dengan iframe ketika kami tidak punya ajax.
dkellner
11

<script type = “text/template”> … </script>sudah usang. Gunakan <template>tag saja.

Reza Salarmehr
sumber
9
<template>tag masih tidak didukung oleh Internet Explorer pada IE 11.
ovinophile
87
Dalam 5 tahun waktu gunakan tag <template>.
superluminary
13
<script type = "text / template"> dapat menampung apa saja, mereka tidak diuraikan. Di sisi lain, tag <template> diurai menjadi DOM, karenanya perlu HTML yang valid. Biasanya, ini berarti bahwa yang pertama akan disimpan sebagai templat utuh, sedangkan yang kedua akan menghapus bagian-bagian yang tidak sesuai dengan html dan memecah templat. ... tentu saja, itu hanya masalah jika Anda menggunakan mesin template seperti kumis atau sejenisnya.
dagnelies
10
JANGAN gunakan tag <template>, dan jangan membuat keputusan berdasarkan sesuatu yang "usang". Ini bukan Milan Fashion Week, jika sesuatu berfungsi dan sesuai secara teknis, ini dapat digunakan :) Sekarang untuk yang asli: tag <template> masih tidak didukung di IE dan Opera Mini (menurut CanIUse), dan tag <script> akan tahan persis apa yang Anda berikan, sebagai lawan dari div tersembunyi atau tag lain yang mungkin kehilangan spasi putih atau komentar Anda.
dkellner
3
2 tahun sejak jawaban diposting, IE11 sendiri adalah teknologi yang usang, dan Microsoft telah pindah ke Edge sebagai gantinya, yang mendukung <template>. Sebagian besar browser desktop utama mendukung <template>tag ini . Saya sangat merekomendasikan menggunakannya sampai sekarang. developer.mozilla.org/en/docs/Web/HTML/Element/…
Yeo