Объяснение <script type = "text/template" >...</script>

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

Может кто-нибудь объяснить это мне? Является ли это законным?

Ответ 1

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

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

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

Ответ 2

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

Попробуйте следующее:

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

Не похоже на его добавление:

 <textarea style="display:none"><span>{{name}}</span></textarea>

Ответ 6

<script type = "text/template"> … </script> устарел. Вместо этого используйте тег <template>.

Ответ 7

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