使用 underscore.js 模块解析
Underscore提供了一个轻量级的模板解析函数，它可以帮助我们有效地组织页面结构和逻辑。
实例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/underscore.js"></script>
<script src="Scripts/jquery-1.11.1.min.js"></script>
</head>
<body>
<!-- 用于显示渲染后的标签 -->
<ul id="element"></ul>
<!-- 定义模板，将模板内容放到一个script标签中 -->
<script type="text/template" id="tpl">
<% for(var i = 0; i < list.length; i++) { %>
<% var item = list[i] %>
<li>
<span><%=item.firstName%> <%=item.lastName%></span>
<span><%-item.city%></span>
</li>
<% } %>
</script>
<script type="text/javascript">
// 获取渲染元素和模板内容
var element = $('#element'),
tpl = $('#tpl').html();
// 创建数据, 这些数据可能是你从服务器获取的
var data = {
list: [
{ firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai' },
{ firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>' },
{ firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou' },
{ firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen' }
]
}
// 解析模板, 返回解析后的内容
var render = _.template(tpl);
var html = render(data);
// 将解析后的内容填充到渲染元素
element.html(html);
</script>
</body>
</html>
在本例中，我们将模板内容放到一个<script>标签中，你可能已经注意到标签的type是text/template而不是text/javascript，因为它无法作为JavaScript脚本直接运行。
我也建议你将模板内容放在<script>中，因为如果你将它们写在一个<div>或其它标签中，它们可能会被添加到DOM树中进行解析（即使你隐藏了这个标签也无法避免）。
.template模板函数只能解析3种模板标签（这比Smarty、JSTL要简单得多）：
<% %>：用于包含JavaScript代码，这些代码将在渲染数据时被执行。
<%= %>：用于输出数据，可以是一个变量、某个对象的属性、或函数调用（将输出函数的返回值）。
<%- %>：用于输出数据，同时会将数据中包含的HTML字符转换为实体形式（例如它会将双引号转换为"形式），用于避免XSS攻击。
当我们希望将数据中的HTML作为文本显示出来时，常常会使用<%- %>标签。
Underscore还允许你修改这3种标签的形式，如果我们想使用{% %}、{%= %}、{%- %}作为标签，可以通过修改templateSettings来实现，就像这样：
_.templateSettings = {
evaluate : /{%([sS]+?)\%}/g,
interpolate : /{%=([sS]+?)\%}/g,
escape : /{%-([sS]+?)%}/g
}
.