近期在学习underscore.js 这个小而美的js库，是前端 MVC 框架backbone依赖库，他的模板方法主要应用场景是ajax交互过程到页面需要大量的字符串拼接，这部分如果一旦不够仔细就很容易拼错，而underscore.js的模板很好的解决了这个问题。自己做了个小小的练习，在requirejs下如何使用underscore.js模板。
首页un.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>underscore.js</title>
</head>
<body>
<div id="wraper">111</div>
<script data-main="js/un" src="require.js"></script> <!-- data-main 指定的入口函数 -->
<script type="text/javascript">
require.config({
baseUrl:'js',//指定目录
paths:{
jquery:'static/jquery-1.10.2.min',//指定jquery位置
underscore:'static/underscore' //指定underscore位置
},
urlArgs: "bust=" + (new Date()).getTime() //时间戳，清缓存的
})
</script>
<script type="text/template" id="tpl"><!-- underscore.js id是钩子 注意是text/template -->
<%_.each(obj,function(item){%>
<ul>
<li>
<a href="<%=item.url%>">
<%=item.name %>
</a>
<span><%=item.time%></span>
<%if(item.sub !== ''){%>
<%_.each(item.sub,function(k){%>
<b><a data-id=<%=k.id%> href="javascript:;" class="b"><%=k.name%></a></b>
<%})%>
<%}else{%> <%}%>
</li>
</ul>
<%})%>
</script>
</body>
</html>
我将requirejs 放到了 与 un.html平行的目录 具体到项目中 可能就不能这样放了。
下面是un.js
require(['jquery','underscore','cache'],function($,U,C){ //指定了依赖jq,underscore ,cache
C.putCode(); //应用cache.js的东西 练习用的 没有实际意义。
var data = [
{id:11,name:'aaa',age:31,url:'http://www.baidu.com',time:'12345',sub:[{id:'9999',name:'删除'},{id:8888,name:'删除'},{id:7777,name:'删除'}]},
{id:23,name:'bbb',age:66,url:'http://www.qiban365.com',time:'021545'},
{id:24,name:'ccc',age:99,url:'http://www.cnblogs.com',time:'45456456456'}
];
var text = _.template($('#tpl').html());
$("#wraper").html(text(data));
//$("#wraper").html(_.template($("#tpl").html(),data));//这个不好使
$(document).on('click','.b',function(){ //冒泡点击事件
console.log($(this).attr('data-id'));
if($(this).length !== ''){
$(this).remove();
}
})
})