<script type = "text/template"> ... </script> 的解释答案

【问题标题】：Explanation of <script type = "text/template"> ... </script><script type = "text/template"> ... </script> 的解释
【发布时间】：2011-06-22 04:56:36
【问题描述】：

我偶然发现了一些我以前从未见过的东西。在 Backbone.js 的示例 TODO 应用程序 (Backbone TODO Example) 的源代码中，他们的模板位于 <script type = "text/template"></script> 中，其中包含看起来像 PHP 之外但带有 JavaScript 标记的代码。

谁能给我解释一下？这合法吗？

【问题讨论】：

很好的问答。我刚刚在新的 YUI App Framework 代码中遇到了这个技巧：new.yuilibrary.com/yui/docs/app/app-todo.html
我看到in the W3C doc 的type="text/tcl" 怎么样？如何使用它？（我应该问另一个问题吗？）
@L01man 是的，你应该问另一个问题。
mjhm 的 YUI 链接现在位于：yuilibrary.com/yui/docs/app/app-todo.html

标签： javascript templates types backbone.js underscore.js

【解决方案1】：

这些脚本标签是实现模板功能的常用方法（如在 PHP 中），但在客户端。

通过将类型设置为“文本/模板”，它不是浏览器可以理解的脚本，因此浏览器将直接忽略它。这使您可以在其中放置任何内容，然后可以稍后将其提取并由模板库使用以生成 HTML sn-ps。

Backbone 不会强迫您使用任何特定的模板库 - 那里有很多：Mustache、Haml、Eco、Google Closure template，等等（示例中使用的那个）您链接到的是underscore.js)。这些将使用它们自己的语法供您在这些脚本标签中编写。

【讨论】：

@Matt，就是这样。同时使用.innerHTML再次检索全文很容易，因此在模板引擎中很常见。
这不只是好消息！我一直在寻找这样的解决方案。感谢您的回复和跟进！
嗨，这里是不同的马特。
期待<template />标签。 html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template
来自未来的你好。 <template> 在这里，但网站仍在使用这种技术，例如 reddit.com。 :F

【解决方案2】：

它合法且非常方便！

试试这个：

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

几个 Javascript 模板库使用这种技术。 Handlebars.js 就是一个很好的例子。

【讨论】：

你会如何使用 jquery 在原始 javascript 中执行此警报？
@tremor 你的意思是在没有 jquery 的原始 javascript 中吗？类似于： var el = document.getElementById('hello'); var html = el.textContent;警报（html）；（您需要进一步研究在 IE 中处理脚本标签的文本）
@SgtPooki 我的意思是没有，谢谢你的回答。我真正想做的是将该脚本 src 到一个外部文件并获取它，但我发现这不太可能......所以我现在正在深入研究 AJAX 和 socket.io。
@tremor，我可能不完全理解您要做什么，但是动态抓取外部文件，以作为模板运行或解析，绝对是可能的。查看 requirejs。
@tremor 如果你想动态拉取外部文件，我宁愿使用 XHR 而不是脚本标签。 XHR 也适用于纯 HTML 响应......或其他任何事情。

【解决方案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 创建者 John Resig http://ejohn.org/blog/javascript-micro-templating/

很好地解释了这一点

【讨论】：

您包含的很棒的资源。该链接教会了我很多东西。

【解决方案4】：

添加到 Box9 的答案：

Backbone.js 依赖于 underscore.js，它本身实现了 John Resig 的原始微模板。

如果您决定将 Backbone.js 与 Rails 一起使用，请务必查看 Jammit gem。它提供了一种非常简洁的方式来管理模板的资产打包。 http://documentcloud.github.com/jammit/#jst

默认情况下，Jammit 也使用 JResig 的微模板，但它也允许您替换模板引擎。

【讨论】：

补充一点，提供Jammit的DocumentCloud就是开发Backbone和Underscore的同一家公司。

【解决方案5】：

这是一种将文本添加到 HTML 而无需渲染或规范化的方法。

这与添加它没有什么不同：

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

【讨论】：

不同的是，textarea 仍会将这些元素插入 DOM 并获取请求的任何外部资产（如图像）。脚本标签不会。
@LocalPCGuy 不正确，在 textarea 中包含 <img src="image.jpg"> 不会导致浏览器获取 image.jpg，浏览器知道 textarea 中的内容不应该被渲染。跨度>
@vikki woops，你是对的，textarea 可能是少数可以替代脚本标签模板的元素之一。
@LocalPCGuy 是的，我认为这两者可以互换使用。如果你的模板有</script>这一行，你就不能在脚本标签中使用它，所以你可以使用textarea，反之亦然。
是的...在模板标记之前和脚本类型=文本/模板之前，我相信我们都使用 textarea 来完成。当我们没有 ajax 时，iframe 也是如此。

【解决方案6】：

<script type = “text/template”> … </script> 已过时。请改用<template> 标签。

【讨论】：

从 IE 11 开始，Internet Explorer 仍然不支持 <template> 标签。
在 5 年内使用
不要使用
自发布答案 2 年以来，IE11 本身就是一项过时的技术，微软已经转向支持 <template> 的 Edge。大多数主要的桌面浏览器都支持这个<template> 标签。我强烈建议现在就使用它。 developer.mozilla.org/en/docs/Web/HTML/Element/…

【解决方案7】：

jQuery Templates 是一个例子，它使用这种方法来存储不会直接在其他 HTML 中呈现的 HTML（这就是重点）： http://api.jquery.com/jQuery.template/

【讨论】：

jQuery.template 被废弃，后续jsviews.com/#jsrender