<script type ="text/template"> ... </ script>的说明

Question

<script type ="text/template"> ... </ script>的说明

Mat*_*att 446 javascript templates types backbone.js underscore.js

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

谁可以给我解释一下这个？这是合法的吗？

Answer 1

Dav*_*ang 406

这些脚本标记是实现模板功能的常用方法(如在PHP中),但在客户端.

通过将类型设置为"text/template",它不是浏览器可以理解的脚本,因此浏览器将忽略它.这允许您在其中放置任何内容,然后可以在以后提取并由模板库使用以生成HTML片段.

Backbone不会强迫您使用任何特定的模板库 - 那里有很多:Mustache,Haml,Eco,Google Closure模板等等(您链接到的示例中使用的是下划线.js).这些将使用自己的语法在这些脚本标记内编写.

@Matt,正是如此.同时,使用`.innerHTML`可以轻松地再次检索全文,因此现在在模板引擎中很常见. (22认同)
期待`<template />`标签.http://www.html5rocks.com/en/tutorials/webcomponents/template/&http://caniuse.com/#search=template (15认同)
嗨,不同的马特在这里.<script type ="text/template">会通过html验证测试吗？ (7认同)
你好,从未来.`<template>`在这里,但网站仍在使用这种技术,例如reddit.com.:F (5认同)
没关系,我在icanhazjs.com上发现它是有效的 (4认同)

Answer 2

Rim*_*ian 115

这是合法的,非常方便!

试试这个:

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

Run Code Online (Sandbox Code Playgroud)

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

你会如何使用jquery在原始javascript中执行此警报？ (5认同)
@tremor你的意思是在没有jquery的原始javascript中？类似于:var el = document.getElementById('hello'); var html = el.textContent; 警报(HTML); (您需要进一步了解IE中处理脚本标签的文本) (3认同)

Answer 3

Fiz*_*han 26

通过设置type其他脚本标记text/javascript,浏览器不会执行脚本标记的内部代码.这称为微模板.这个概念广泛用于单页面应用程序(又称SPA).

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

Run Code Online (Sandbox Code Playgroud)

对于微模板,脚本标签的类型是text/template.Jquery创建者John Resig对此进行了很好的解释http://ejohn.org/blog/javascript-micro-templating/

Answer 4

And*_*ade 13

要添加到Box9的答案:

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

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

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

Answer 5

Ker*_*mes 12

这是一种向HTML添加文本而不进行渲染或规范化的方法.

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

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

Run Code Online (Sandbox Code Playgroud)

不同的是,textarea仍会将这些元素插入到DOM中并获取所请求的任何外部资源(如图像).脚本标签不会. (32认同)
@LocalPCGuy不正确,包括`<img rel="nofollow noreferrer" src ="image.jpg">`在textarea内部不会导致浏览器获取`image.jpg`,浏览器知道textarea内的内容不是要渲染. (12认同)
@vikki woops,你是对的,textarea可能是少数几个可以替代脚本标签模板的元素之一. (5认同)
@LocalPCGuy是的,我认为这两个可以互换使用.如果你的模板有"</ script>"行,你就不能在脚本标签中使用它,所以你可以使用textarea,反之亦然. (4认同)
是的...在模板标签之前和脚本类型=文本/模板之前,我相信,我们都用textarea做了.当我们没有ajax时,iframe也是如此. (2认同)

Answer 6

小智 10

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

在5年时间内使用<template>标签. (85认同)
<script type ="text/template">可以保存任何内容,但不会对其进行解析.另一方面,<template>标签被解析为DOM,因此需要有效的HTML.通常,这意味着第一个将保留为完整的模板,而第二个将剥离不符合HTML标准的部分并打破模板....当然,如果你使用像胡子之类的模板引擎,这只是一个问题. (12认同)
从IE 11开始,Internet Explorer不支持`<template>`标记. (9认同)
不要使用<template>标签,也不要根据其他"过时"的内容做出决定.这不是米兰时装周,如果某些东西在工作和技术上合适,它可以使用:)现在真实:IE和Opera Mini(根据CanIUse)仍然不支持<template>标签,<script>标签将准确地保留你给它的东西,而不是隐藏的div或任何其他可能丢失你的空格或评论的标签. (9认同)
5 年后，您不能再使用 `<template>`。IE11 仍然存在。 (3认同)
自答案发布2年以来,IE11本身就是一种过时的技术,微软已经转向Edge,它支持"<template>".大多数主流桌面浏览器都支持这个"<template>"标签.我强烈建议你现在使用它.https://developer.mozilla.org/en/docs/Web/HTML/Element/template#Browser_compatibility (2认同)
如果你想使用模板标签，你可以为 IE 浏览器创建标签：```html <script type="text/javascript"> var isIE = !!window.ActiveXObject; if(isIE){ document.createElement("template"); } </script> ``` (2认同)

归档时间：	15 年前
查看次数：	198146 次
最近记录：	8 年，12 月前