Javascript <script type = "text/template"> ... </script> 的解释
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4912586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Explanation of <script type = "text/template"> ... </script>
提问by Matt
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 Example)的源代码中,他们的模板<script type = "text/template"></script>
包含在一个.
Can someone explain this to me? Is this legit?
谁可以给我解释一下这个?这是合法的吗?
采纳答案by David Tang
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. 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). These will use their own syntax for you to write within those script tags.
Backbone 不会强迫您使用任何特定的模板库——那里有很多模板库:Mustache、Haml、Eco、Google Closure 模板等等(您链接到的示例中使用的是underscore.js)。这些将使用它们自己的语法供您在这些脚本标记中编写。
回答by Rimian
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. Handlebars.jsis a good example.
几个 Javascript 模板库使用这种技术。Handlebars.js就是一个很好的例子。
回答by Fizer Khan
By setting script tag type
other than text/javascript
, browser will not execute the internal code of script tag. This is called micro template. This concept is widely used in Single page application(aka SPA).
通过设置type
除 之外的脚本标签text/javascript
,浏览器将不会执行脚本标签的内部代码。这称为微模板。这个概念广泛用于单页应用程序(又名 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
. It is very well explained by Jquery creator John Resig http://ejohn.org/blog/javascript-micro-templating/
对于微模板,脚本标签的类型是text/template
. Jquery 创建者 John Resig http://ejohn.org/blog/javascript-micro-templating/很好地解释了这一点
回答by Andrew De Andrade
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. It provides a very clean way to manage asset packaging for templates. http://documentcloud.github.com/jammit/#jst
如果您决定将 Backbone.js 与 Rails 一起使用,请务必查看 Jammit gem。它提供了一种非常干净的方式来管理模板的资产打包。 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 的微模板,但它也允许您替换模板引擎。
回答by Kernel James
It's a way of adding text to HTML without it being rendered or normalized.
这是一种将文本添加到 HTML 中而不对其进行渲染或规范化的方法。
It's no different than adding it like:
这与添加它没有什么不同:
<textarea style="display:none"><span>{{name}}</span></textarea>
回答by Reza Salarmehr
<script type = “text/template”> … </script>
is obsolete. Use <template>
tag instead.
<script type = “text/template”> … </script>
已过时。改用<template>
标签。
回答by Niels Heidenreich
jQuery Templates is an example of something that uses this method to store HTML that will not be rendered directly (that's the whole point) inside other HTML: http://api.jquery.com/jQuery.template/
jQuery 模板是使用此方法存储不会直接呈现在其他 HTML 中的 HTML(这就是重点)的示例:http: //api.jquery.com/jQuery.template/