Объяснение <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

'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

3

Шаблоны jQuery - это пример того, что этот метод используется для хранения HTML, который не будет отображаться напрямую (в этом весь смысл) внутри другого HTML: http://api.jquery.com/jQuery.template/

Нильс Хайденрайх
источник

3

jQuery.template заброшен, за ним следует jsviews.com/#jsrender

doekman

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

Ответы: