<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/