underscore的template方法是比较常用的JS模板工具，它的好处是，你不用额外找工具了，通常你的项目都会加载一个underscore。
把下面代码保存成html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/template" id="tpl1">
<% _.each(datas, function (item) { %>
<div class="outer">
<%= item.film %> - <%= item.url %> - <%= item.director %>
</div>
<% }); %>
</script>
<script type="text/template" id="tpl2">
<% if ( 2 + 4 === 6 ) {
_.each(datas, function (item) { %>
<div class="outer">
<%= item.film %> - <%= item.url %> - <%= item.director %>
</div>
<% });
} %>
</script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript">
var datas = [
{
film: '电影名称1',
url: 'http://www.baidu.com',
director: '导演名称1'
},
{
film: '电影名称2',
url: 'http://www.baidu.com',
director: '导演名称2'
},
{
film: '电影名称3',
url: 'http://www.baidu.com',
director: '导演名称4'
},
{
film: '电影名称4',
url: 'http://www.baidu.com',
director: '导演名称4'
},
];
$('#example1').html( _.template($('#tpl1').html(), datas) );
$('#example2').html( _.template($('#tpl2').html(), datas) );
</script>
</body>
</html>
我们参看http://www.css88.com/doc/underscore/#template
_.template(templateString, [settings])
下划线变量是underscore变量的别称。
templateString是一个模板字符串，template函数负责解析这个模板字符串，所以这个模板字符串需要按规矩写，根据官方的介绍，这个字符串本质是js、标识符、html代码三者糅合的字符串。
<script type="text/template" id="tpl">
<% _.each(datas, function (item) { %>
<div class="outer">
<%= item.film %> - <%= item.url %> - <%= item.director %>
</div>
<% }); %>
</script>
type="text/template"是为了让浏览器不把这个script内的内容当做js来解析，同时script的display:none还继续生效，保证模板字符串不会被显示出来。
模板里凡是js代码，要被<% … %>包裹起来，比如<% _.each(datas, function (item) { %>和<% }); %>。对于列表内容，这句代码足够用了。
模板里凡是变量代码，要被<%= … %>包裹起来，比如<%= item.film %>、<%= item.url %>和<%= item.director %>。
所以，我们写代码的方式可以是先写JS代码，然后写HTML代码，然后把JS代码用<% … %>包裹起来，以及把HTML代码中的变量用<%= … %>包裹起来，这样就能满足90%的日常需要了。
[settings]是一个json数组，数组的每个元素都是一个json对象，这个json数组负责提供内容。
剩下问题是如果[settings]来自于一个json文件，该怎么办？假设json的地址是/api/xx/oo。代码如下：
$.get('/api/xx/oo', function(datas) {
$('#example1').html( _.template($('#tpl1').html(), datas) );
});
网友评论