<Script type = “text / template”>… </script> açıklaması

456

Daha önce hiç görmediğim bir şeyle karşılaştım. Backbone.js'nin örnek TODO uygulamasının ( Omurga TODO Örneği ) kaynağında, <script type = "text/template"></script>PHP dışında bir şey gibi görünen, ancak JavaScript etiketleri olan bir kod içeren şablonları vardı .

Birisi bana bunu açıklayabilir mi? Bu yasal mı?

javascript  templates  types  backbone.js  underscore.js 
— Mat
kaynak
Harika soru ve cevap. Bu hile ile yeni YUI App Framework kodunda yeni karşılaştım: new.yuilibrary.com/yui/docs/app/app-todo.html
— mjhm
4
Ne hakkında type="text/tcl"gördüm ki W3C doc ? Bu nasıl kullanılır? (Başka bir soru sormalı mıyım?)
— L01man
3
@ L01man evet, başka bir soru sormalısın.
— Nate Glenn
mjhm'un YUI bağlantısı şu anda: yuilibrary.com/yui/docs/app/app-todo.html
— gpvos

Yanıtlar:

414

Bu komut dosyası etiketleri, (PHP gibi) şablonlama işlevselliğini uygulamanın istemci tarafında yaygın bir yöntemidir.

Türü "metin / şablon" olarak ayarlamak, tarayıcının anlayabileceği bir komut dosyası değildir ve bu nedenle tarayıcı yalnızca yok sayar. Bu, oraya daha sonra çıkarılabilen ve geçici bir kütüphane tarafından HTML parçacıkları oluşturmak için kullanılabilecek herhangi bir şey koymanıza izin verir.

Omurga herhangi bir şablon kütüphanesini kullanmak zorlamaz - epeyce orada vardır: Bıyık , Haml , Eko , Google Kapatma şablon ve benzeri (örneğin kullanılana sen etmektir bağlantılı underscore.js ). Bunlar, bu komut dosyası etiketlerine yazmanız için kendi sözdizimlerini kullanır.

— David Tang
kaynak
22
@ Matt, aynen öyle. Aynı zamanda, tam metni tekrar kullanarak almak kolaydır .innerHTML, bu nedenle şablonlama motorları arasında yaygın bir uygulamadır.
— David Tang
1
Bu harika bir haber değil! Ben böyle bir çözüm arıyordum .. Yanıtınız ve takibiniz için teşekkürler!
— Matt
7
merhaba, farklı Matt burada. <Script type = "text / template"> bir html doğrulama testi geçebilir mi?
— Matt
17
Etiketlemek için sabırsızlanıyorum <template />. html5rocks.com/tr/tutorials/webcomponents/template & caniuse.com/#search=template
— Volker E.
5
Gelecekten merhaba. <template>burada, ancak siteler hala reddit.com gibi bu tekniği kullanıyor. : F
— Victor Zamanian
114

Bu yasal ve çok kullanışlı!

Bunu dene:

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

Birkaç Javascript şablon kütüphanesi bu tekniği kullanır. Handlebars.js buna iyi bir örnektir.

— Rimian
kaynak
5
Bu uyarıyı jquery ile çiğ javascript'te nasıl yaparsınız?
— titreme
3
@tremor Şunu mu demek istediniz: jquery olmadan ham javascript? Şuna benzer: var el = document.getElementById ('merhaba'); var html = el.textContent; uyarısı (HTML); (komut dosyası etiketlerinin '
— IE'deki
@SgtPooki ya ben demek istemedim, cevap için teşekkürler. Gerçekten yapmak istediğim bu scc'yi harici bir dosyaya almak ve almak, ama bunun gerçekten mümkün olmadığını buldum .. bu yüzden şimdi AJAX ve socket.io içine dalış.
— titreme
@tremor, ne yapmaya çalıştığınızı tam olarak anlamayabilirim, ancak harici dosyaları dinamik olarak kapmak, şablon olarak çalıştırmak veya ayrıştırmak kesinlikle mümkündür. Gereksinimleri kontrol edin.
— SgtPooki
@tremor Harici dosyaları dinamik olarak çekmek istiyorsanız, komut dosyası etiketlerinden ziyade XHR kullanmayı tercih ederim. XHR aynı zamanda sade HTML yanıtlarıyla da çalışır ... ya da bu konuda başka herhangi bir şeyle.
— Jeroen Landheer
26

Tarayıcı, typedışında bir komut dosyası etiketi ayarlayarak komut dosyası etiketinin text/javascriptdahili kodunu yürütmez. Buna mikro şablon denir. Bu kavram, Tek sayfa uygulamasında (diğer adıyla SPA) yaygın olarak kullanılmaktadır.

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

Mikro şablon için komut dosyası etiketinin türü text/template. Jquery yaratıcısı John Resig tarafından çok iyi açıklanmıştır http://ejohn.org/blog/javascript-micro-templating/

— Fizer Han
kaynak
Eklediğiniz harika kaynak. Bu bağlantı bana çok şey öğretti.
— rocktheartsm4l
13

Box9'un cevabına eklemek için:

Backbone.js, kendisi John Resig'in orijinal mikro şablonlarını uygulayan underscore.js'ye bağımlıdır.

Backbone.js'yi Rails ile kullanmaya karar verirseniz, Jammit mücevherlerini kontrol ettiğinizden emin olun. Şablonlar için varlık paketlemesini yönetmek için çok temiz bir yol sağlar. http://documentcloud.github.com/jammit/#jst

Varsayılan olarak Jammit, JResig'in mikro şablonlarını da kullanır, ancak şablon motorunu değiştirmenize de olanak tanır.

— Andrew De Andrade
kaynak
Eklemek gerekirse, Jammit'i sağlayan DocumentCloud, Omurga ve Alt Çizgi'yi geliştiren aynı şirkettir.
— Ceasar Bautista
12

HTML'ye oluşturulmadan veya normalleştirilmeden metin eklemenin bir yoludur.

Aşağıdaki gibi eklemekten farklı değil:

 <textarea style="display:none"><span>{{name}}</span></textarea>
— Çekirdek James
kaynak
32
Farklıdır, bir metin alanı yine de bu öğeleri DOM'a ekler ve istenen harici varlıkları (resimler gibi) getirir. Bir komut dosyası etiketi olmayacak.
— LocalPCGuy
13
@LocalPCBu doğru değil, <img src="image.jpg">bir textarea dahil olmak üzere tarayıcının getirilmesine neden olmaz, tarayıcı image.jpgbir textarea içindeki içeriğin oluşturulmadığını bilir.
— vikki
5
@vikki woops, haklısın, textarea komut dosyası etiket şablonunun yerine geçebilecek birkaç öğeden biri olabilir.
— YerelPCAlt
4
@LocalPCGuy evet bence bu ikisi birbirinin yerine kullanılabilir. Şablonunuzda </script>bir komut dosyası etiketi içinde kullanılamayacak bir satır varsa, textarea öğesini kullanabilirsiniz, bunun tersi de geçerlidir.
— vikki
2
Evet ... Şablon etiketinden önce ve script türünden önce = text / template, hepimiz textarea ile yaptık, inanıyorum. Ajax'ımız olmadığında iframe'lerle aynı şey.
— dkellner
11

<script type = “text/template”> … </script>eski. Kullanım <template>etiketi yerine.

— Reza Salarmehr
kaynak
9
<template>etiketi IE 11'den itibaren Internet Explorer tarafından desteklenmemektedir
— ovinophile
87
5 yıl içinde <template> etiketini kullanın.
— superluminary
13
<script type = “text / template”> herhangi bir şeyi tutabilir, ayrıştırılmaz. Öte yandan, <template> etiketleri bir DOM'da ayrıştırılır, bu nedenle geçerli HTML'nin olması gerekir. Genellikle bu, birincinin sağlam şablon olarak tutulacağı, ikincisinin ise html uyumlu olmayan parçaları kesip şablonu kıracağı anlamına gelir. ... elbette, sadece bıyık veya benzeri şablon motorları kullanıyorsanız sorun olur.
— dagnelies
10
<template> etiketini KULLANMAYIN ve kararınızı "kullanılmayan" başka bir şeye dayanarak vermeyin. Bu Milan Moda Haftası değil, eğer bir şey çalışıyor ve teknik olarak uygunsa, kullanılabilir :) Şimdi gerçek: <template> etiketi IE ve Opera Mini'de hala desteklenmiyor (CanIUse'a göre) ve <script> etiketi gizli bir div veya beyaz alanlarınızı veya yorumlarınızı kaybedebilecek başka bir etiketin aksine, tam olarak verdiğiniz şeyi tutun.
— dkellner
3
Gönderilen yanıttan 2 yıl sonra, IE11'in kendisi eski bir teknolojidir ve Microsoft bunun yerine Edge'e geçmiştir <template>. Çoğu büyük masaüstü tarayıcısı bu <template>etiketi desteklemektedir . Şimdilik kullanmanızı şiddetle tavsiye ediyorum. developer.mozilla.org/tr/docs/Web/HTML/Element/…
— Yeo
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.