Объяснение

Question

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

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

Answer 1

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

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

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

Answer 2

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

Попробуйте:

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

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

Answer 3

При установке тега скрипта type, отличного от text/javascript, браузер не будет выполнять внутренний код тега скрипта. Это называется микро шаблон. Эта концепция широко используется в одностраничном приложении (также известном как 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/

Answer 4

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

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

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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