underscore是一个非常实用的javascript库，提供许多编程时需要的功能的支持，他在不扩展任何javascript的原生对象的情况下提供很多实用的功能。
无论你写一段小的js代码，还是写一个大型的html5应用，underscore都能帮上忙。目前，underscore已经被广泛使用，例如，backbone.js唯一强依赖的库就是underscore.js。
今天主要讨论underscore 的前端模板功能。它的模板功能和前一篇介绍的javascript前端模板是一样的。对数据的处理更加方便。写了个小例，供大家参考学习。
完整实例下载
复制代码 代码如下:
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script id="t2" type="text/template"> <br><%_.each(datas, function(item) {%> <br><div class="outer"> <br><div class="title"> <br><span ><%=item.film%> <br></script>
<script> <br>var datas = [ <br>{ <br>title: "一九四二", <br>url: "http://www.jb51.net", <br>film:"电影1" <br>}, <br>{ <br>title: "少年派的漂流", <br>url: "http://www.jb51.net", <br>film:"电影2" <br>}, <br>{ <br>title: "教父", <br>url: "http://www.jb51.net", <br>film:"电影3" <br>}, <br>{ <br>title: "肖申克的救赎", <br>url: "http://www.jb51.net", <br>film:"电影4" <br>}, <br>{ <br>title: "3d2012", <br>url: "http://www.jb51.net", <br>film:"电影5" <br>} <br>]; <br>$("body").html( _.template($("#t2").html(), datas)); <br></script>
<script type="text/javascript"> <br>$('.ul').hide(); <br>$('.ul>li:last-child').addClass('last-li'); <br>$('body>div:first-child>ul').show(); <br>$('.title').click(function(){ <br>$(this).siblings().toggle(); <br>$(this).parent().siblings().children('.bbs-nav-ul').hide(); <br>}) $('.title').hover(function(){ <br>$(this).toggleClass('hover'); <br>}) <br>$('.ul>li').hover(function(){ <br>$(this).toggleClass('hover'); <br>}) <br></script>
