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

IT技术 javascript templates types backbone.js underscore.js
2021-02-02 06:11:44

我只是偶然发现了一些我以前从未见过的东西。在 Backbone.js 的示例 TODO 应用程序(Backbone TODO 示例的源代码中,他们的模板<script type = "text/template"></script>包含在一个.

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

6个回答

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

通过将类型设置为“文本/模板”,它不是浏览器可以理解的脚本,因此浏览器将简单地忽略它。这允许您将任何内容放入其中,然后可以稍后提取并由模板库使用以生成 HTML 片段。

Backbone 不会强迫您使用任何特定的模板库 - 有很多模板库:MustacheHamlEcoGoogle Closure 模板等等(您链接到的示例中使用的是underscore.js)。这些将使用它们自己的语法供您在这些脚本标记中编写。

2021-03-12 06:11:44
嗨,这里是不同的马特。<script type="text/template"> 会通过 html 验证测试吗?
2021-03-18 06:11:44
@Matt,正是这样。同时,使用 可以轻松地再次检索全文.innerHTML,因此现在在模板引擎中很常见。
2021-04-05 06:11:44
来自未来的你好。<template>在这里,但网站仍在使用这种技术,例如 reddit.com。:F
2021-04-07 06:11:44
好吧,这不仅仅是好消息!我一直在寻找这样的解决方案..感谢您的回复和跟进!
2021-04-10 06:11:44

这是合法的,非常方便!

试试这个:

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

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

@SgtPooki 是我的意思,谢谢你的回答。我真正想做的是将该脚本 src 到外部文件并获取它,但我发现这不太可能......所以我现在正在深入研究 AJAX 和 socket.io。
2021-03-20 06:11:44
@tremor 如果您想动态提取外部文件,我宁愿使用 XHR 而不是脚本标签。XHR 也适用于纯 HTML 响应......或其他任何与此相关的内容。
2021-03-22 06:11:44
@tremor 你的意思是在没有 jquery 的原始 javascript 中吗?类似于: var el = document.getElementById('hello'); var html = el.textContent; 警报(html);(您需要进一步研究在 IE 中处理脚本标签的文本)
2021-03-25 06:11:44
@tremor,我可能不完全理解您要做什么,但是动态获取外部文件以运行或解析为模板绝对是可能的。查看requirejs。
2021-03-26 06:11:44
您将如何使用 jquery 在原始 javascript 中执行此警报?
2021-03-29 06:11:44

通过设置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/很好地解释了这一点

你包括的很好的资源。那个链接教会了我很多。
2021-03-26 06:11:44

要添加到 Box9 的答案中:

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

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

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

另外,提供 Jammit 的 DocumentCloud 是开发 Backbone 和 Underscore 的同一家公司。
2021-04-01 06:11:44

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

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

 <textarea style="display:none"><span>{{name}}</span></textarea>
@vikki woops,你是对的,textarea 可能是少数几个可以替代脚本标签模板的元素之一。
2021-03-16 06:11:44
不同的是,textarea 仍然会将这些元素插入到 DOM 中并获取请求的任何外部资产(如图像)。脚本标签不会。
2021-03-19 06:11:44
@LocalPCGuy 那不是真的,包括<img src="image.jpg">在 textarea 内不会导致浏览器 fetch image.jpg,浏览器知道 textarea 内的内容不是要呈现的。
2021-04-02 06:11:44
@LocalPCGuy 是的,我认为这两个可以互换使用。如果您的模板具有该行,则</script>您不能在脚本标记中使用它,因此您可以使用 textarea,反之亦然。
2021-04-06 06:11:44
是的...在模板标签和脚本 type=text/template 之前,我相信我们都是用 textarea 做到的。当我们没有 ajax 时,iframes 也是如此。
2021-04-09 06:11:44