提问人：Matt 提问时间：2/6/2011 最后编辑：InSyncMatt 更新时间：6/28/2023 访问量：238749
<script type = “text/template”的解释> ...</脚本>
Explanation of <script type = "text/template"> ... </script>
问：
我只是偶然发现了一些我以前从未见过的东西。在 Backbone.js 的示例 TODO 应用程序（Backbone TODO 示例）的源代码中，他们的模板位于 中，其中包含看起来像是带有标签的代码。<script type="text/template"></script>PHPJavaScript
有人可以向我解释一下吗？这是合法的吗？
答：
440赞
David Tang
2/6/2011
#1
这些脚本标记是实现模板功能（如在 PHP 中）的常用方法，但在客户端。
通过将类型设置为“text/template”，它不是浏览器可以理解的脚本，因此浏览器将简单地忽略它。这允许您将任何内容放入其中，然后可以稍后提取这些内容，并由模板库用于生成 HTML 代码段。
Backbone不会强迫你使用任何特定的模板库 - 有很多：Mustache，Haml，Eco，Google Closure模板等等（你链接到的示例中使用的模板是下划线.js）。这些将使用自己的语法供您在这些脚本标记中编写。
评论
22赞
David Tang
2/6/2011
@Matt，正是如此。同时，使用 很容易再次检索全文，因此现在在模板引擎中很常见。.innerHTML
1赞
Matt
2/6/2011
好吧，这不就是个好消息吗！我一直在寻找这样的解决方案。感谢您的回复和跟进！
7赞
Matt
4/6/2012
嗨，这里是不同的马特。<script type=“text/template”>能否通过 html 验证测试？
17赞
Volker E.
6/8/2013
期待标签。html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template<template />
6赞
Victor Zamanian
3/29/2017
来自未来的问候。 在这里，但网站仍在使用这种技术，例如 reddit.com。：女<template>
14赞
Andrew De Andrade
2/24/2011
#2
补充 Box9 的答案：
Backbone.js依赖于下划线.js，它本身实现了John Resig的原始微模板。
如果您决定将 Backbone.js 与 Rails 一起使用，请务必查看 Jammit gem。它提供了一种非常干净的方式来管理模板的资产打包。http://documentcloud.github.com/jammit/#jst
默认情况下，Jammit 也使用 JResig 的微模板，但它也允许您替换模板引擎。
评论
0赞
Ceasar
2/17/2017
此外，提供 Jammit 的 DocumentCloud 是开发 Backbone 和 Underscore 的同一家公司。
4赞
Niels Heidenreich
6/21/2011
#3
jQuery Templates 是一个示例，它使用此方法来存储不会直接呈现的 HTML（这就是重点）在其他 HTML 中： http://api.jquery.com/jQuery.template/
评论
3赞
doekman
9/7/2013
jQuery.template 被放弃，随后是 jsviews.com/#jsrender
13赞
Kernel James
3/19/2012
#4
这是一种在不呈现或规范化的情况下向 HTML 添加文本的方法。
这与添加它没有什么不同，例如：
<textarea style="display:none"><span>{{name}}</span></textarea>
评论
34赞
LocalPCGuy
5/14/2013
不同的是，textarea 仍会将这些元素插入 DOM 并获取请求的任何外部资产（如图像）。脚本标记不会。
13赞
vikki
4/12/2014
@LocalPCGuy事实并非如此，包括 textarea 内部不会导致浏览器获取，浏览器知道 textarea 中的内容不应该被呈现。<img src="image.jpg">image.jpg
5赞
LocalPCGuy
4/12/2014
@vikki呜
4赞
vikki
4/13/2014
@LocalPCGuy是的，我认为这两者可以互换使用。如果你的模板有该行，你就不能在脚本标签中使用它，所以你可以使用textarea，反之亦然。</script>
2赞
dkellner
1/9/2017
是的。。。我相信，在模板标签和脚本 type=text/template 之前，我们都使用 textarea 做到了这一点。当我们没有 ajax 时，iframe 也是如此。
124赞
Rimian
5/14/2012
#5
这是合法的，非常方便！
试试这个：
<script id="hello" type="text/template">
Hello world
</script>
<script>
alert($('#hello').html());
</script>
一些 Javascript 模板库使用这种技术。Handlebars.js就是一个很好的例子。
评论
5赞
tremor
10/10/2013
您将如何使用 jquery 在原始 javascript 中执行此警报？
3赞
SgtPooki
10/17/2013
@tremor 你的意思是没有jquery的原始javascript吗？类似： var el = document.getElementById（'hello'）;var html = el.textContent;警报（html）;（您需要进一步了解如何在 IE 中处理脚本标记的文本）
0赞
tremor
10/31/2013
@SgtPooki我的意思是没有，谢谢你的回答。我真正想做的是将该脚本 src 到外部文件并获取它，但我发现这实际上是不可能的。所以我现在正在深入研究 AJAX 和 socket.io。
0赞
SgtPooki
11/1/2013
@tremor，我可能不完全理解您要做什么，但是动态抓取外部文件，作为模板运行或解析，绝对是可能的。查看 requirejs.
0赞
Jeroen Landheer
8/18/2015
@tremor 如果你想动态拉取外部文件，我宁愿使用 XHR 而不是脚本标签。XHR 也适用于纯 HTML 响应...或其他任何与此相关的内容。
30赞
Fizer Khan
3/17/2014
#6
通过设置脚本标签以外的脚本标签，浏览器将不会执行脚本标签的内部代码。这称为微模板。这个概念被广泛用于单页应用程序（又名SPA）。typetext/javascript
<script type="text/template">I am a Micro template.
I am going to make your web page faster.</script>
对于微模板，脚本标记的类型为 。Jquery 的创建者 John Resig 对此进行了很好的解释 http://ejohn.org/blog/javascript-micro-templating/text/template
评论
0赞
rocktheartsm4l
8/11/2015
你包括的好资源。这个链接教会了我很多。
16赞
Reza Salarmehr
6/12/2014
#7
<script type = "text/template"> … </script>已过时。请改用标签。<template>
评论
10赞
ovinophile
8/23/2014
<template>自 IE 11 起，Internet Explorer 仍不支持标记。
93赞
superluminary
9/30/2014
在 5 年内使用 <template> 标签。
15赞
dagnelies
9/30/2014
<script type = “text/template”>可以容纳任何东西，它们不会被解析。另一方面，<template> 标签被解析为 DOM，因此需要有效的 HTML。通常，这意味着第一个将保留为完整的模板，而第二个将剥离不符合 html 的部分并破坏模板。...当然，只有当您使用 Mustache 等模板引擎时，这才是一个问题。
16赞
dkellner
6/19/2015
不要使用 <template> 标签，也不要根据其他“过时”的东西做出决定。这不是米兰时装周，如果某些东西有效且技术上合适，则可以使用:)现在真的：IE 和 Opera Mini 仍然不支持 <template> 标签（根据 CanIUse），<script> 标签将完全保存您赋予它的内容，而不是隐藏的 div 或任何其他可能丢失空格或注释的标签。
4赞
Yeo
10/9/2016
自答案发布以来的 2 年，IE11 本身是一项过时的技术，Microsoft 已经转向支持 .大多数主流桌面浏览器都支持此标记。我强烈建议从现在开始使用它。developer.mozilla.org/en/docs/Web/HTML/Element/......<template><template>
评论
type="text/tcl"