＜script type =“text / template”＞ ... ＜/ script＞的说明

本文翻译自：Explanation of

I just stumbled upon something I've never seen before. 我偶然发现了一些我以前从未见过的东西。 In the source of Backbone.js's example TODO application ( Backbone TODO Example ) they had their templates inside a <script type = "text/template"></script> , which contained code that looks like something out of PHP but with JavaScript tags. 在Backbone.js的示例TODO应用程序（ Backbone TODO示例 ）的源代码中，他们的模板位于<script type = "text/template"></script> ，其中包含的代码看起来像是PHP之外但带有JavaScript标记的代码。

Can someone explain this to me? 谁可以给我解释一下这个？ Is this legit? 这是合法的吗？

---

#1楼

参考：https://stackoom.com/question/KbzG/script-type-text-template-script-的说明

---

#2楼

It's legit and very handy! 这是合法的，非常方便！

Try this: 试试这个：

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

Several Javascript templating libraries use this technique. 一些Javascript模板库使用这种技术。 Handlebars.js is a good example. Handlebars.js就是一个很好的例子。

---

#3楼

By setting script tag type other than text/javascript , browser will not execute the internal code of script tag. 通过设置text/javascript以外的脚本标签type ，浏览器不会执行脚本标签的内部代码。 This is called micro template. 这称为微模板。 This concept is widely used in Single page application(aka SPA). 这个概念广泛用于单页面应用程序（又称SPA）。

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

For micro template, type of the script tag is text/template . 对于微模板，脚本标记的类型是text/template 。 It is very well explained by Jquery creator John Resig http://ejohn.org/blog/javascript-micro-templating/ Jquery创建者John Resig对此进行了很好的解释http://ejohn.org/blog/javascript-micro-templating/

---

#4楼

<script type = “text/template”> … </script> is obsolete. <script type = “text/template”> … </script>已过时。 Use <template> tag instead. 请改用<template>标签。

---

#5楼

Those script tags are a common way to implement templating functionality (like in PHP) but on the client side. 这些脚本标记是实现模板功能的常用方法（如在PHP中），但在客户端。

By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. 通过将类型设置为“text / template”，它不是浏览器可以理解的脚本，因此浏览器将忽略它。 This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets. 这允许您在其中放置任何内容，然后可以在以后提取并由模板库使用以生成HTML片段。

Backbone doesn't force you to use any particular templating library - there are quite a few out there: Mustache , Haml , Eco , Google Closure template , and so on (the one used in the example you linked to is underscore.js ). Backbone不会强迫您使用任何特定的模板库 - 那里有很多： Mustache ， Haml ， Eco ， Google Closure模板等等（您链接到的示例中使用的是下划线.js ）。 These will use their own syntax for you to write within those script tags. 这些将使用自己的语法在这些脚本标记内编写。

---

#6楼

To add to Box9's answer: 要添加到Box9的答案：

Backbone.js is dependent on underscore.js, which itself implements John Resig's original microtemplates. Backbone.js依赖于underscore.js，它本身实现了John Resig的原始微模板。

If you decide to use Backbone.js with Rails, be sure to check out the Jammit gem. 如果您决定将Backbone.js与Rails一起使用，请务必查看Jammit gem。 It provides a very clean way to manage asset packaging for templates. 它提供了一种非常干净的方式来管理模板的资产包装。 http://documentcloud.github.com/jammit/#jst http://documentcloud.github.com/jammit/#jst

By default Jammit also uses JResig's microtemplates, but it also allows you to replace the templating engine. 默认情况下，Jammit也使用JResig的微模板，但它也允许您替换模板引擎。