<script type =“text / template”> … </ script>的解释
我偶然发现了一些我从未见过的东西。 在Backbone.js的例子TODO应用程序( Backbone TODO Example )的源代码中,他们把它们的模板放在一个<script type = "text/template"></script>
,其中包含的代码看上去像PHP以外的东西,但是带有JavaScript标签。
谁可以给我解释一下这个? 这是合法吗?
这些脚本标记是实现模板function(如在PHP中)的常见方式,但在客户端。
通过将types设置为“文本/模板”,它不是浏览器可以理解的脚本,因此浏览器将忽略它。 这允许你在那里放入任何东西,这些东西可以在稍后被提取,并被模板库用来生成HTML片段。
Backbone并不强迫你使用任何特定的模板库,这里有很多: Mustache , Haml , Eco , Google Closure模板等(在你链接的例子中使用的是underscore.js )。 这些将使用自己的语法来编写这些脚本标记。
这是合法的,非常方便!
尝试这个:
<script id="hello" type="text/template"> Hello world </script> <script> alert($('#hello').html()); </script>
几个Javascript模板库使用这种技术。 Handlebars.js就是一个很好的例子。
通过设置script text/javascript
以外的脚本标签type
,浏览器将不执行脚本标签的内部代码。 这被称为微模板。 这个概念被广泛应用于单页面应用程序(aka SPA)。
<script type="text/template">I am a Micro template. I am going to make your web page faster.</script>
对于微型模板,脚本标签的types是text/template
。 Jquery的创build者John Resig很好地解释了这个问题http://ejohn.org/blog/javascript-micro-templating/
要添加到Box9的答案:
Backbone.js依赖于underscore.js,它本身实现了John Resig的原始模型。
如果你决定使用Rails的Backbone.js,一定要看看Jammit的gem。 它提供了一个非常干净的方式来pipe理模板的资产打包。 http://documentcloud.github.com/jammit/#jst
默认情况下,Jammit也使用JResig的microtemplates,但是它也允许你replace模板引擎。
这是向HTML中添加文本而不呈现或标准化的一种方式。
这与添加它没有什么不同:
<textarea style="display:none"><span>{{name}}</span></textarea>
<script type = “text/template”> … </script>
已经过时。 改用<template>
标签。
jQuery模板是一个使用这种方法存储HTML的例子,它不会被直接渲染(这是整个点)在其他HTML: http : //api.jquery.com/jQuery.template/