Objaśnienie <script type = „text / template”>… </script>

456

Natknąłem się na coś, czego nigdy wcześniej nie widziałem. W źródle przykładowej aplikacji TODO Backbone.js ( Przykład TODO Backbone ) mieli szablony wewnątrz <script type = "text/template"></script>, które zawierały kod, który wygląda jak coś z PHP, ale ze znacznikami JavaScript.

Czy ktoś może mi to wyjaśnić? Czy to jest legalne?

Matt
źródło
Świetne pytanie i odpowiedź. Właśnie natknąłem się na tę sztuczkę w nowym kodzie YUI App Framework: new.yuilibrary.com/yui/docs/app/app-todo.html
mjhm
4
Co o type="text/tcl"czym widziałem w dokumencie W3C ? Jak tego użyć? (Czy powinienem zadać kolejne pytanie?)
L01man,
3
@ L01man tak, powinieneś zadać kolejne pytanie.
Nate Glenn
Link YUI mjhm teraz: yuilibrary.com/yui/docs/app/app-todo.html
gpvos

Odpowiedzi:

413

Te tagi skryptowe są powszechnym sposobem implementacji funkcjonalności szablonów (jak w PHP), ale po stronie klienta.

Ustawiając typ na „tekst / szablon”, nie jest to skrypt zrozumiały dla przeglądarki, więc przeglądarka po prostu go zignoruje. Pozwala to na umieszczenie w nim wszystkiego, co można później wyodrębnić i wykorzystać w bibliotece szablonów do wygenerowania fragmentów HTML.

Backbone nie zmusza cię do korzystania z żadnej konkretnej biblioteki szablonów - jest ich całkiem sporo: Wąsy , Haml , Eco , szablon Google Closure i tak dalej (ta, której użyto w przykładzie, z którym się łączyłeś , to underscore.js ). Będą one używać własnej składni do pisania w obrębie tych znaczników skryptu.

David Tang
źródło
22
@Matt, dokładnie to. Jednocześnie łatwo jest odzyskać pełny tekst ponownie .innerHTML, dlatego jest to obecnie powszechna praktyka wśród silników szablonów.
David Tang,
1
Cóż, to nie tylko fantastyczne wieści! Szukałem takiego rozwiązania .. Dziękuję za odpowiedź i kontynuację!
Matt
7
cześć, inny Matt tutaj. Czy <script type = "text / template"> przejdzie test weryfikacyjny HTML?
Matt
5
Witam z przyszłości. <template>jest tutaj, ale strony nadal używają tej techniki, takie jak reddit.com. : F
Victor Zamanian
114

To jest legalne i bardzo przydatne!

Spróbuj tego:

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

Kilka bibliotek szablonów JavaScript używa tej techniki. Handlebars.js jest dobrym przykładem.

Rimian
źródło
5
Jak zrobiłbyś to ostrzeżenie w surowym javascript z jquery?
drżenie
3
@tremor Czy masz na myśli surowy JavaScript bez JQuery? Coś w stylu: var el = document.getElementById ('hello'); var html = el.textContent; alert (html); (musisz zajrzeć dalej do przetwarzania tekstu znaczników skryptów w IE)
SgtPooki
@SgtPooki ya miałem na myśli bez, dzięki za odpowiedź. To, co naprawdę chciałbym zrobić, to src tego skryptu do zewnętrznego pliku i pobranie go, ale okazało się, że to naprawdę nie jest możliwe ... więc teraz nurkuję w AJAX i socket.io.
drżenie
@ drżenie, może nie rozumiem dokładnie, co próbujesz zrobić, ale dynamiczne pobieranie plików zewnętrznych, aby uruchomić lub parsować jako szablon, jest zdecydowanie możliwe. Sprawdź wymagania.
SgtPooki
@tremor Jeśli chcesz dynamicznie pobierać pliki zewnętrzne, wolę używać XHR niż znaczników skryptów. XHR działa również z prostymi odpowiedziami HTML ... lub cokolwiek innego w tym zakresie.
Jeroen Landheer,
26

Ustawiając tag skryptu typeinny niż text/javascript, przeglądarka nie będzie wykonywać wewnętrznego kodu tagu skryptu. Nazywa się to mikro szablonem. Ta koncepcja jest szeroko stosowana w aplikacji jednostronicowej (aka SPA).

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

W przypadku mikro szablonu typ znacznika skryptu to text/template. Jest to bardzo dobrze wyjaśnione przez twórcę Jquery Johna Resiga http://ejohn.org/blog/javascript-micro-templating/

Fizer Khan
źródło
Świetny zasób, który uwzględniłeś. Ten link wiele mnie nauczył.
rocktheartsm4l,
13

Aby dodać do odpowiedzi Box9:

Backbone.js jest zależny od underscore.js, który sam implementuje oryginalne mikrotemplaty Johna Resiga.

Jeśli zdecydujesz się użyć Backbone.js z Railsami, koniecznie sprawdź klejnot Jammit. Zapewnia to bardzo czysty sposób zarządzania pakowaniem zasobów dla szablonów. http://documentcloud.github.com/jammit/#jst

Domyślnie Jammit używa również mikrotemplatów JResiga, ale pozwala także na wymianę silnika szablonów.

Andrew De Andrade
źródło
Aby dodać, DocumentCloud, który zapewnia Jammit, to ta sama firma, która opracowała Backbone i Underscore.
Ceasar Bautista
12

Jest to sposób dodawania tekstu do HTML bez renderowania lub znormalizowania.

Nie różni się niczym od dodania go w następujący sposób:

 <textarea style="display:none"><span>{{name}}</span></textarea>
Kernel James
źródło
32
Jest inaczej, obszar tekstowy będzie nadal wstawiał te elementy do DOM i pobierał wszelkie wymagane zasoby zewnętrzne (takie jak obrazy). Tag skryptu nie będzie.
LocalPCGuy
13
@LocalPCGuy to nieprawda, w tym <img src="image.jpg">wewnątrz obszaru tekstowego nie spowoduje pobrania image.jpgprzeglądarki, przeglądarka wie, że treść wewnątrz obszaru tekstowego nie jest przeznaczona do renderowania.
vikki
5
@ Vikki woops, masz rację, textarea może być jednym z niewielu elementów, które mogłyby być dobrym zamiennikiem szablonów skryptów.
LocalPCGuy
4
@LocalPCGuy tak, myślę, że tych dwóch można używać zamiennie. Jeśli szablon ma linię </script>, nie możesz jej użyć w znaczniku skryptu, więc możesz wtedy użyć obszaru tekstowego i odwrotnie.
Vikki
2
Tak ... Przed tagiem szablonu i przed typem skryptu = tekst / szablon, wszyscy zrobiliśmy to z textarea. To samo dotyczy ramek iframe, kiedy nie mieliśmy ajax.
dkellner
11

<script type = “text/template”> … </script>jest przestarzały. <template>Zamiast tego użyj tagu.

Reza Salarmehr
źródło
9
<template>tag nadal nie jest obsługiwany przez Internet Explorer od IE 11.
ovinophile
87
Za 5 lat użyj znacznika <template>.
superluminarny
13
<script type = „text / template”> może przechowywać wszystko, nie są one analizowane. Z drugiej strony, znaczniki <template> są przetwarzane w DOM, dlatego musi mieć poprawny HTML. Zwykle oznacza to, że pierwszy zostanie zachowany jako nienaruszony szablon, a drugi usunie części niezgodne z HTML i złamie szablon. ... to oczywiście problem tylko wtedy, gdy używasz silników szablonów, takich jak wąsy lub podobne.
Dagnelies
10
NIE używaj znacznika <template> i nie podejmuj decyzji na podstawie czegoś innego, co jest „przestarzałe”. To nie jest Milan Fashion Week, jeśli coś działa i jest technicznie odpowiednie, można go użyć :) Teraz na poważnie: tag <template> jest nadal nieobsługiwany w IE i Opera Mini (zgodnie z CanIUse), a tag <script> będzie przechowuj dokładnie to, co dajesz, w przeciwieństwie do ukrytego div lub jakiegokolwiek innego tagu, który może utracić białe znaki lub komentarze.
dkellner
3
Dwa lata od opublikowania odpowiedzi sama IE11 jest przestarzałą technologią, a Microsoft przeniósł się do Edge'a, który obsługuje <template>. Większość głównych przeglądarek stacjonarnych obsługuje ten <template>tag. Zdecydowanie zalecam używanie go od teraz. developer.mozilla.org/en/docs/Web/HTML/Element/…
Yeo