underscore.js 中的 template 用法

最近看了下 underscore.js ，看到里面有个 template 的方法，小使了一下，感受挺不错的，以为能知足我平常工做的需求了，并且使用起来也简单容易，具体用法能够 参考这里 。还有， underscore.js 是个不错的东西呀，里面有不少很实用的方法，均可以顺手拿来使用，省了很多功夫呢。：）

<script type="text/template" id="tpl">
<% _.each(datas, function (item) { %>
	<div class="outer">
		<%= item.title %> - <%= item.url %> - <%= item.film %>
	</div>
<% }); %>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript">
var datas = [
	{
		title: '标题1',
		url: 'http://www.baidu.com',
		film: '电影名称1'
	},
	{
		title: '标题2',
		url: 'http://www.baidu.com',
		film: '电影名称2'
	},
	{
		title: '标题3',
		url: 'http://www.baidu.com',
		film: '电影名称3'
	},
	{
		title: '标题4',
		url: 'http://www.baidu.com',
		film: '电影名称4'
	},
	{
		title: '标题5',
		url: 'http://www.baidu.com',
		film: '电影名称5'
	}
];

$('body').html( _.template($('#tpl').html(), datas) );
</script>

具体关于underscore的模型引擎，官方介绍以下：

template_.template(templateString, [settings]) 
将 JavaScript 模板编译为能够用于页面呈现的函数, 对于经过JSON数据源生成复杂的HTML并呈现出来的操做很是有用。 模板函数可使用 <%= … %>插入变量, 也能够用<% … %>执行任意的 JavaScript 代码。 若是您但愿插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候，能够传递一个含有与模板对应属性的data对象 。 若是您要写一个一次性的, 您能够传对象 data 做为第二个参数给模板 template 来直接呈现, 这样页面会当即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何能够覆盖的设置 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

您也能够在JavaScript代码中使用 print. 有时候这会比使用 <%= ... %> 更方便.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

若是ERB式的分隔符您不喜欢, 您能够改变Underscore的模板设置, 使用别的符号来嵌入代码.定义一个 interpolate 正则表达式来逐字匹配嵌入代码的语句, 若是想插入转义后的HTML代码则须要定义一个 escape 正则表达式来匹配,还有一个 evaluate 正则表达式来匹配您想要直接一次性执行程序而不须要任何返回值的语句.您能够定义或省略这三个的任意一个.例如, 要执行Mustache.js类型的模板:

_.templateSettings = {
    evaluate    : /<%([\s\S]+?)%>/g,
    interpolate : /<%=([\s\S]+?)%>/g,
    escape      : /<%-([\s\S]+?)%>/g
};
var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

默认的, template 经过 with 语句来取得 data 全部的值. 固然, 您也能够在 variable 设置里指定一个变量名. 这样能显著提高模板的渲染速度.

_.template("Using 'with': <%= data.answer %>", {variable: 'data'})({answer: 'no'});
=> "Using 'with': no"

预编译模板对调试不可重现的错误颇有帮助. 这是由于预编译的模板能够提供错误的代码行号和堆栈跟踪, 有些模板在客户端(浏览器)上是不能经过编译的 在编译好的模板函数上, 有 source 属性能够提供简单的预编译功能.

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>