Объяснение <script type = «text / template»>… </ script>

456

Я просто наткнулся на то, чего никогда раньше не видел. В исходном примере приложения TODO для Backbone.js ( Пример Backbone TODO ) они содержали свои шаблоны внутри a <script type = "text/template"></script>, который содержал код, похожий на что-то из PHP, но с тегами JavaScript.

Может кто-то объяснить это мне? Это законно?

javascript  templates  types  backbone.js  underscore.js 
— Matt
источник
Отличный вопрос и ответ. Я только что натолкнулся на эту хитрость в новом коде YUI App Framework: new.yuilibrary.com/yui/docs/app/app-todo.html
— mjhm
4
Что type="text/tcl"я видел в документе W3C ? Как это использовать? (Должен ли я задать еще один вопрос?)
— L01man
3
@ L01man да, ты должен задать другой вопрос.
— Нейт Гленн
Ссылка на YUI от mjhm теперь доступна по
— gpvos,

Ответы:

414

Эти теги сценариев являются распространенным способом реализации шаблонных функций (как в PHP), но на стороне клиента.

Установив тип «text / template», браузер не сможет понять сценарий, поэтому браузер просто проигнорирует его. Это позволяет вам помещать туда что угодно, что потом можно будет извлечь и использовать библиотеку шаблонов для генерации фрагментов HTML.

Backbone не заставляет вас использовать какую-либо конкретную библиотеку шаблонов - их довольно много: усы , Haml , Eco , шаблон Google Closure и т. Д. (В примере, на который вы ссылаетесь, используется underscore.js ). Они будут использовать свой собственный синтаксис, чтобы вы могли писать в этих тегах сценария.

— Дэвид Тан
источник
22
@Matt, именно это. В то же время , легко получить полный текст , снова используя .innerHTML, следовательно , это обычная практика в настоящее время среди Templating двигателей.
— Дэвид Тан
1
Ну, разве это не просто фантастические новости! Я искал решение как это .. Спасибо за ваш ответ и продолжение!
— Мэтт
7
привет, другой Мэтт здесь Будет ли <script type = "text / template"> пройти проверку HTML?
— Мэтт
17
С нетерпением жду <template />тега. html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template
— Фолькер Э.
5
Привет из будущего. <template>здесь, но сайты все еще используют эту технику, например, reddit.com. : F
— Виктор Заманян
114

Это законно и очень удобно!

Попробуй это:

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

Несколько библиотек шаблонов Javascript используют эту технику. Handlebars.js является хорошим примером.

— Rimian
источник
5
Как бы вы сделали это предупреждение в сыром javascript с jquery?
— тремор
3
@tremor Вы имеете в виду в сыром javascript без jquery? Что-то вроде: var el = document.getElementById ('hello'); var html = el.textContent; оповещения (HTML); (вам нужно больше посмотреть на обработку текста тегов скрипта в IE)
— SgtPooki
@SgtPooki Да, я имел в виду без, спасибо за ответ. То, что я действительно хотел бы сделать, это переписать этот скрипт во внешний файл и получить его, но я обнаружил, что это не очень возможно ... поэтому сейчас я углубляюсь в AJAX и socket.io.
— тремор
@tremor, я не совсем понимаю, что вы пытаетесь сделать, но захват внешних файлов динамически, для запуска или анализа в качестве шаблона, определенно возможен. Проверьте requirejs.
— SgtPooki
@tremor Если вы хотите извлекать внешние файлы динамически, я бы лучше использовал XHR, чем теги скрипта. XHR также работает с простыми HTML-ответами ... или чем-то еще в этом отношении.
— Йерун Ландхир
26

При установке тега script, typeотличного от text/javascript, браузер не будет выполнять внутренний код тега script. Это называется микро шаблон. Эта концепция широко используется в одностраничном приложении (также известном как SPA).

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

Для микро-шаблона тип тега сценария - text/template. Это очень хорошо объяснил создатель Jquery Джон Резиг http://ejohn.org/blog/javascript-micro-templating/

— Физер Хан
источник
Отличный ресурс, который вы включили. Эта ссылка научила меня многому.
— rocktheartsm4l
13

Чтобы добавить ответ Box9:

Backbone.js зависит от underscore.js, который сам реализует оригинальные микротемплаты Джона Резига.

Если вы решили использовать Backbone.js с Rails, обязательно ознакомьтесь с гемом Jammit. Он обеспечивает очень простой способ управления упаковкой активов для шаблонов. http://documentcloud.github.com/jammit/#jst

По умолчанию Jammit также использует микротемблиты JResig, но также позволяет заменить шаблонизатор.

— Эндрю Де Андраде
источник
Кроме того, DocumentCloud, которая предоставляет Jammit, - это та же компания, которая разработала Backbone и Underscore.
— Цезарь Баутиста
12

Это способ добавления текста в HTML без его визуализации или нормализации.

Это ничем не отличается от добавления:

 <textarea style="display:none"><span>{{name}}</span></textarea>
— Кернел Джеймс
источник
32
Это отличается, textarea будет по-прежнему вставлять эти элементы в DOM и извлекать любые запрошенные внешние ресурсы (например, изображения). Сценарий тега не будет.
— LocalPCGuy
13
@LocalPCGuy, это не так, в том числе <img src="image.jpg">внутри текстовой области браузер не будет загружаться image.jpg, браузер знает, что контент внутри текстовой области не предназначен для визуализации.
— Викки
5
@ vikki woops, вы правы, textarea может быть одним из немногих элементов, которые могли бы стать жизнеспособной заменой шаблонов тегов скрипта.
— LocalPCGuy
4
@LocalPCGuy да, я думаю, что эти два могут использоваться взаимозаменяемо. Если в вашем шаблоне есть строка, </script>вы не можете использовать ее внутри тега script, поэтому вы можете использовать текстовую область, и наоборот.
— Викки
2
Да ... До тега шаблона и до сценария type = text / template, мы все сделали это с помощью textarea, я полагаю. То же самое и с iframes, когда у нас не было ajax.
— dkellner
11

<script type = “text/template”> … </script>устарел. Используйте <template>тег вместо.

— Реза Салармер
источник
9
<template>Internet Explorer все еще не поддерживает этот тег
— начиная с
87
Через 5 лет используйте тег <template>.
— Сверхсветовой
13
<script type = «text / template»> может содержать что угодно, они не анализируются. С другой стороны, теги <template> анализируются в DOM, следовательно, требуется корректный HTML. Обычно это означает, что первый будет сохранен как неповрежденный шаблон, а второй будет удалять части, не соответствующие html, и разрушать шаблон. ... конечно, это проблема, только если вы используете шаблонизаторы, такие как усы или тому подобное.
— '16
10
НЕ используйте тег <template> и не принимайте решение, основываясь на том, что что-то «устарело». Это не Миланская неделя моды, если что-то работает и технически приемлемо, ее можно использовать :) Теперь по-настоящему: тег <template> все еще не поддерживается в IE и Opera Mini (согласно CanIUse), а тег <script> будет храните именно то, что вы ему даете, в отличие от скрытого div или любого другого тега, который может потерять ваши пробелы или комментарии.
— dkellner
3
Спустя 2 года после публикации ответа, IE11 сам по себе является устаревшей технологией, и вместо этого Microsoft перешла на Edge, который поддерживает <template>. Большинство основных настольных браузеров поддерживают этот <template>тег. Я настоятельно рекомендую использовать его сейчас. developer.mozilla.org/en/docs/Web/HTML/Element/…
— Yeo
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.