underscore中template的使用Demo
Posted 改变需要勇气，习惯需要坚持。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了underscore中template的使用Demo相关的知识，希望对你有一定的参考价值。
在客户端渲染数据时，一般可通过underscore中的template对数据模板进行渲染，例如：
定义模板，需要把type类型设置为“text/template”
<script type="text/template" id="tpl"> <% _.each(data, function (item) { %> <div class="outer"> <%= item.title %> - <%= item.url %> - <%= item.film %> </div> <% }); %> </script>
在js调用模板的时候，传入模板数据，例如：
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\' } , { title: \'标题6666\', url: \'http://www.baidu.com\', film: \'电影名称5\' } ]; var t=_.template($("#tpl").html()); $(\'#content\').html(t({"data":datas})); //这里把模板中的数据源取别名为data,则模板中的数据源也用这个别名，与此保持一致
例如：根据拼音首字母对城市进行分组，代码如下：
首先数据源文件city.js中的数据格式如下；
{"status":0,"msg":"","data":[{"cityId":340800,"cityName":"\\u5b89\\u5e86\\u5e02","cityPinYin":"anqingshi"},{"cityId":210300,"cityName":"\\u978d\\u5c71\\u5e02","cityPinYin":"anshanshi"},{"cityId":410500,"cityName":"\\u5b89\\u9633\\u5e02","cityPinYin":"anyangshi"},{"cityId":340300,"cityName":"\\u868c\\u57e0\\u5e02","cityPinYin":"bangbushi"},{"cityId":130600,"cityName":"\\u4fdd\\u5b9a\\u5e02","cityPinYin":"baodingshi"},{"cityId":110100,"cityName":"\\u5317\\u4eac\\u5e02","cityPinYin":"beijingshi"},{"cityId":530500,"cityName":"\\u4fdd\\u5c71\\u5e02","cityPinYin":"baoshanshi"},{"cityId":150200,"cityName":"\\u5305\\u5934\\u5e02","cityPinYin":"baotoushi"},{"cityId":341600,"cityName":"\\u4eb3\\u5dde\\u5e02","cityPinYin":"bozhoushi"},{"cityId":220100,"cityName":"\\u957f\\u6625\\u5e02","cityPinYin":"changchunshi"},{"cityId":430700,"cityName":"\\u5e38\\u5fb7\\u5e02","cityPinYin":"changdeshi"},{"cityId":510100,"cityName":"\\u6210\\u90fd\\u5e02","cityPinYin":"chengdoushi"},{"cityId":150400,"cityName":"\\u8d64\\u5cf0\\u5e02","cityPinYin":"chifengshi"},{"cityId":500100,"cityName":"\\u91cd\\u5e86\\u5e02","cityPinYin":"chongqingshi"},{"cityId":430100,"cityName":"\\u957f\\u6c99\\u5e02","cityPinYin":"changshashi"},{"cityId":130900,"cityName":"\\u6ca7\\u5dde\\u5e02","cityPinYin":"cangzhoushi"},{"cityId":320400,"cityName":"\\u5e38\\u5dde\\u5e02","cityPinYin":"changzhoushi"},{"cityId":431000,"cityName":"\\u90f4\\u5dde\\u5e02","cityPinYin":"chenzhoushi"},{"cityId":210600,"cityName":"\\u4e39\\u4e1c\\u5e02","cityPinYin":"dandongshi"},{"cityId":441900,"cityName":"\\u4e1c\\u839e\\u5e02","cityPinYin":"dongguanshi"},{"cityId":210200,"cityName":"\\u5927\\u8fde\\u5e02","cityPinYin":"dalianshi"},{"cityId":230600,"cityName":"\\u5927\\u5e86\\u5e02","cityPinYin":"daqingshi"},{"cityId":370500,"cityName":"\\u4e1c\\u8425\\u5e02","cityPinYin":"dongyingshi"},{"cityId":371400,"cityName":"\\u5fb7\\u5dde\\u5e02","cityPinYin":"dezhoushi"},{"cityId":440600,"cityName":"\\u4f5b\\u5c71\\u5e02","cityPinYin":"foshanshi"},{"cityId":210400,"cityName":"\\u629a\\u987a\\u5e02","cityPinYin":"fushunshi"},{"cityId":341200,"cityName":"\\u961c\\u9633\\u5e02","cityPinYin":"fuyangshi"},{"cityId":361000,"cityName":"\\u629a\\u5dde\\u5e02","cityPinYin":"fuzhoushi"},{"cityId":350100,"cityName":"\\u798f\\u5dde\\u5e02","cityPinYin":"fuzhoushi"},{"cityId":450300,"cityName":"\\u6842\\u6797\\u5e02","cityPinYin":"guilinshi"},{"cityId":510800,"cityName":"\\u5e7f\\u5143\\u5e02","cityPinYin":"guangyuanshi"},{"cityId":640400,"cityName":"\\u56fa\\u539f\\u5e02","cityPinYin":"guyuanshi"},{"cityId":440100,"cityName":"\\u5e7f\\u5dde\\u5e02","cityPinYin":"guangzhoushi"},{"cityId":360700,"cityName":"\\u8d63\\u5dde\\u5e02","cityPinYin":"ganzhoushi"},{"cityId":320800,"cityName":"\\u6dee\\u5b89\\u5e02","cityPinYin":"huaianshi"},{"cityId":130400,"cityName":"\\u90af\\u90f8\\u5e02","cityPinYin":"handanshi"},{"cityId":230100,"cityName":"\\u54c8\\u5c14\\u6ee8\\u5e02","cityPinYin":"haerbinshi"},{"cityId":340100,"cityName":"\\u5408\\u80a5\\u5e02","cityPinYin":"hefeishi"},{"cityId":150100,"cityName":"\\u547c\\u548c\\u6d69\\u7279\\u5e02","cityPinYin":"huhehaoteshi"},{"cityId":431200,"cityName":"\\u6000\\u5316\\u5e02","cityPinYin":"huaihuashi"},{"cityId":150700,"cityName":"\\u547c\\u4f26\\u8d1d\\u5c14\\u5e02","cityPinYin":"hulunbeiershi"},{"cityId":420200,"cityName":"\\u9ec4\\u77f3\\u5e02","cityPinYin":"huangshishi"},{"cityId":430400,"cityName":"\\u8861\\u9633\\u5e02","cityPinYin":"hengyangshi"},{"cityId":330500,"cityName":"\\u6e56\\u5dde\\u5e02","cityPinYin":"huzhoushi"},{"cityId":330100,"cityName":"\\u676d\\u5dde\\u5e02","cityPinYin":"hangzhoushi"},{"cityId":441300,"cityName":"\\u60e0\\u5dde\\u5e02","cityPinYin":"huizhoushi"},{"cityId":360800,"cityName":"\\u5409\\u5b89\\u5e02","cityPinYin":"jianshi"},{"cityId":330700,"cityName":"\\u91d1\\u534e\\u5e02","cityPinYin":"jinhuashi"},{"cityId":440700,"cityName":"\\u6c5f\\u95e8\\u5e02","cityPinYin":"jiangmenshi"},{"cityId":230800,"cityName":"\\u4f73\\u6728\\u65af\\u5e02","cityPinYin":"jiamusishi"},{"cityId":370800,"cityName":"\\u6d4e\\u5b81\\u5e02","cityPinYin":"jiningshi"},{"cityId":370100,"cityName":"\\u6d4e\\u5357\\u5e02","cityPinYin":"jinanshi"},{"cityId":330400,"cityName":"\\u5609\\u5174\\u5e02","cityPinYin":"jiaxingshi"},{"cityId":445200,"cityName":"\\u63ed\\u9633\\u5e02","cityPinYin":"jieyangshi"},{"cityId":210700,"cityName":"\\u9526\\u5dde\\u5e02","cityPinYin":"jinzhoushi"},{"cityId":421000,"cityName":"\\u8346\\u5dde\\u5e02","cityPinYin":"jingzhoushi"},{"cityId":410200,"cityName":"\\u5f00\\u5c01\\u5e02","cityPinYin":"kaifengshi"},{"cityId":530100,"cityName":"\\u6606\\u660e\\u5e02","cityPinYin":"kunmingshi"},{"cityId":131000,"cityName":"\\u5eca\\u574a\\u5e02","cityPinYin":"langfangshi"},{"cityId":411100,"cityName":"\\u6f2f\\u6cb3\\u5e02","cityPinYin":"luoheshi"},{"cityId":320700,"cityName":"\\u8fde\\u4e91\\u6e2f\\u5e02","cityPinYin":"lianyungangshi"},{"cityId":350800,"cityName":"\\u9f99\\u5ca9\\u5e02","cityPinYin":"longyanshi"},{"cityId":410300,"cityName":"\\u6d1b\\u9633\\u5e02","cityPinYin":"luoyangshi"},{"cityId":620100,"cityName":"\\u5170\\u5dde\\u5e02","cityPinYin":"lanzhoushi"},{"cityId":450200,"cityName":"\\u67f3\\u5dde\\u5e02","cityPinYin":"liuzhoushi"},{"cityId":340500,"cityName":"\\u9a6c\\u978d\\u5c71\\u5e02","cityPinYin":"maanshanshi"},{"cityId":440900,"cityName":"\\u8302\\u540d\\u5e02","cityPinYin":"maomingshi"},{"cityId":510700,"cityName":"\\u7ef5\\u9633\\u5e02","cityPinYin":"mianyangshi"},{"cityId":330200,"cityName":"\\u5b81\\u6ce2\\u5e02","cityPinYin":"ningboshi"},{"cityId":360100,"cityName":"\\u5357\\u660c\\u5e02","cityPinYin":"nanchangshi"},{"cityId":350900,"cityName":"\\u5b81\\u5fb7\\u5e02","cityPinYin":"ningdeshi"},{"cityId":511000,"cityName":"\\u5185\\u6c5f\\u5e02","cityPinYin":"neijiangshi"},{"cityId":320100,"cityName":"\\u5357\\u4eac\\u5e02","cityPinYin":"nanjingshi"},{"cityId":450100,"cityName":"\\u5357\\u5b81\\u5e02","cityPinYin":"nanningshi"},{"cityId":320600,"cityName":"\\u5357\\u901a\\u5e02","cityPinYin":"nantongshi"},{"cityId":350300,"cityName":"\\u8386\\u7530\\u5e02","cityPinYin":"putianshi"},{"cityId":370200,"cityName":"\\u9752\\u5c9b\\u5e02","cityPinYin":"qingdaoshi"},{"cityId":130300,"cityName":"\\u79e6\\u7687\\u5c9b\\u5e02","cityPinYin":"qinhuangdaoshi"},{"cityId":230200,"cityName":"\\u9f50\\u9f50\\u54c8\\u5c14\\u5e02","cityPinYin":"qiqihaershi"},{"cityId":350500,"cityName":"\\u6cc9\\u5dde\\u5e02","cityPinYin":"quanzhoushi"},{"cityId":231200,"cityName":"\\u7ee5\\u5316\\u5e02","cityPinYin":"suihuashi"},{"cityId":310100,"cityName":"\\u4e0a\\u6d77\\u5e02","cityPinYin":"shanghaishi"},{"cityId":130100,"cityName":"\\u77f3\\u5bb6\\u5e84\\u5e02","cityPinYin":"shijiazhuangshi"},{"cityId":330600,"cityName":"\\u7ecd\\u5174\\u5e02","cityPinYin":"shaoxingshi"},{"cityId":430500,"cityName":"\\u90b5\\u9633\\u5e02","cityPinYin":"shaoyangshi"},{"cityId":210100,"cityName":"\\u6c88\\u9633\\u5e02","cityPinYin":"shenyangshi"},{"cityId":140600,"cityName":"\\u6714\\u5dde\\u5e02","cityPinYin":"shuozhoushi"},{"cityId":440300,"cityName":"\\u6df1\\u5733\\u5e02","cityPinYin":"shenzhenshi"},{"cityId":320500,"cityName":"\\u82cf\\u5dde\\u5e02","cityPinYin":"suzhoushi"},{"cityId":370900,"cityName":"\\u6cf0\\u5b89\\u5e02","cityPinYin":"taianshi"},{"cityId":120100,"cityName":"\\u5929\\u6d25\\u5e02","cityPinYin":"tianjinshi"},{"cityId":340700,"cityName":"\\u94dc\\u9675\\u5e02","cityPinYin":"tonglingshi"},{"cityId":130200,"cityName":"\\u5510\\u5c71\\u5e02","cityPinYin":"tangshanshi"},{"cityId":140100,"cityName":"\\u592a\\u539f\\u5e02","cityPinYin":"taiyuanshi"},{"cityId":321200,"cityName":"\\u6cf0\\u5dde\\u5e02","cityPinYin":"taizhoushi"},{"cityId":370700,"cityName":"\\u6f4d\\u574a\\u5e02","cityPinYin":"weifangshi"},{"cityId":420100,"cityName":"\\u6b66\\u6c49\\u5e02","cityPinYin":"wuhanshi"},{"cityId":340200,"cityName":"\\u829c\\u6e56\\u5e02","cityPinYin":"wuhushi"},{"cityId":610500,"cityName":"\\u6e2d\\u5357\\u5e02","cityPinYin":"weinanshi"},{"cityId":320200,"cityName":"\\u65e0\\u9521\\u5e02","cityPinYin":"wuxishi"},{"cityId":330300,"cityName":"\\u6e29\\u5dde\\u5e02","cityPinYin":"wenzhoushi"},{"cityId":610100,"cityName":"\\u897f\\u5b89\\u5e02","cityPinYin":"xianshi"},{"cityId":341800,"cityName":"\\u5ba3\\u57ce\\u5e02","cityPinYin":"xuanchengshi"},{"cityId":411000,"cityName":"\\u8bb8\\u660c\\u5e02","cityPinYin":"xuchangshi"},{"cityId":420900,"cityName":"\\u5b5d\\u611f\\u5e02","cityPinYin":"xiaoganshi"},{"cityId":350200,"cityName":"\\u53a6\\u95e8\\u5e02","cityPinYin":"xiamenshi"},{"cityId":532800,"cityName":"\\u897f\\u53cc\\u7248\\u7eb3\\u50a3\\u65cf\\u81ea\\u6cbb\\u5dde","cityPinYin":"xishuangbannadaizuzizhizhou"},{"cityId":130500,"cityName":"\\u90a2\\u53f0\\u5e02","cityPinYin":"xingtaishi"},{"cityId":430300,"cityName":"\\u6e58\\u6f6d\\u5e02","cityPinYin":"xiangtanshi"},{"cityId":410700,"cityName":"\\u65b0\\u4e61\\u5e02","cityPinYin":"xinxiangshi"},{"cityId":433100,"cityName":"\\u6e58\\u897f\\u571f\\u5bb6\\u65cf\\u82d7\\u65cf\\u81ea\\u6cbb\\u5dde","cityPinYin":"xiangxitujiazumiaozuzizhizhou"},{"cityId":360500,"cityName":"\\u65b0\\u4f59\\u5e02","cityPinYin":"xinyushi"},{"cityId":420600,"cityName":"\\u8944\\u9633\\u5e02","cityPinYin":"xiangyangshi"},{"cityId":320300,"cityName":"\\u5f90\\u5dde\\u5e02","cityPinYin":"xuzhoushi"},{"cityId":511500,"cityName":"\\u5b9c\\u5bbe\\u5e02","cityPinYin":"yibinshi"},{"cityId":640100,"cityName":"\\u94f6\\u5ddd\\u5e02","cityPinYin":"yinchuanshi"},{"cityId":320900,"cityName":"\\u76d0\\u57ce\\u5e02","cityPinYin":"yanchengshi"},{"cityId":420500,"cityName":"\\u5b9c\\u660c\\u5e02","cityPinYin":"yichangshi"},{"cityId":360900,"cityName":"\\u5b9c\\u6625\\u5e02","cityPinYin":"yichunshi"},{"cityId":210800,"cityName":"\\u8425\\u53e3\\u5e02","cityPinYin":"yingkoushi"},{"cityId":370600,"cityName":"\\u70df\\u53f0\\u5e02","cityPinYin":"yantaishi"},{"cityId":430600,"cityName":"\\u5cb3\\u9633\\u5e02","cityPinYin":"yueyangshi"},{"cityId":430900,"cityName":"\\u76ca\\u9633\\u5e02","cityPinYin":"yiyangshi"},{"cityId":321000,"cityName":"\\u626c\\u5dde\\u5e02","cityPinYin":"yangzhoushi"},{"cityId":431100,"cityName":"\\u6c38\\u5dde\\u5e02","cityPinYin":"yongzhoushi"},{"cityId":440400,"cityName":"\\u73e0\\u6d77\\u5e02","cityPinYin":"zhuhaishi"},{"cityId":130700,"cityName":"\\u5f20\\u5bb6\\u53e3\\u5e02","cityPinYin":"zhangjiakoushi"},{"cityId":321100,"cityName":"\\u9547\\u6c5f\\u5e02","cityPinYin":"zhenjiangshi"},{"cityId":440800,"cityName":"\\u6e5b\\u6c5f\\u5e02","cityPinYin":"zhanjiangshi"},{"cityId":330900,"cityName":"\\u821f\\u5c71\\u5e02","cityPinYin":"zhoushanshi"},{"cityId":640500,"cityName":"\\u4e2d\\u536b\\u5e02","cityPinYin":"zhongweishi"},{"cityId":430200,"cityName":"\\u682a\\u6d32\\u5e02","cityPinYin":"zhuzhoushi"},{"cityId":350600,"cityName":"\\u6f33\\u5dde\\u5e02","cityPinYin":"zhangzhoushi"},{"cityId":410100,"cityName":"\\u90d1\\u5dde\\u5e02","cityPinYin":"zhengzhoushi"}]}
js请求数据组装数据：
var isTest = (window.location.href.indexOf(\'localhost\') >0 || window.location.href.indexOf(\'127.0.0.1\') >0); var url = isTest ? \'./data/city.js\' : \'真实url\'; var cityMap={}; $.ajax({ type:"Get", url:url, timeout:5000, data:"", success:function(result){ if(isTest){ result=JSON.parse(result); } //alert(result.data); if(result.data && result.data.length>0){ $.each(result.data,function(i,item){ var firstChar=item.cityPinYin.charAt(0).toUpperCase(); cityMap[firstChar]=cityMap[firstChar]?cityMap[firstChar]:[]; cityMap[firstChar].push({ cityId:item.cityId, cityName:item.cityName }); }); //获得模板 var lettTemp=_.template($("#letterList").html()); var cityTemp=_.template($("#cityList").html()); //渲染模板 $("#fixedNav").html(lettTemp({"data":cityMap})); $("#contentList").append(cityTemp({"data":cityMap})); // $.each(cityMap,function(key,item){ // console.log("key="+key); // $.each(item,function(i,city){ // console.log("cityName="+city.cityName); // }) // }); // console.log(cityMap); } } })
模板：
<script type="text/template" id="letterList"> <a href="javascript:;" style="line-height: 27.2727px;" class="">*</a> <%_.each(data,function(value,index,obj){%> <a href="javascript:void(0)" class="ng-binding ng-scope" style="line-height: 27.2727px;" data-id="<%=index%>"><%=index%></a> <%})%> </script>
<script type="text/template" id="cityList"> <%_.each(data,function(cityList,index){%> <div class="ng-scope"> <dt class="ng-binding" id="<%=index%>"> <%=index%> </dt> <%_.each(cityList,function(item,index){%> <dd class="ng-binding ng-scope" data-id="<%=item.cityId%>"><%=item.cityName%></dd> <%})%> </div> <%})%> </script>
备注：
例如如上模板渲染中的_.each方法，此方法中第一个参数为value值，第二个参数为index值，区别与jquery中的$.each方法
具体此方法的用法请参考官方文档
以及：http://blog.itrunc.com/2014/04/29/underscore-each/
以上是关于underscore中template的使用Demo的主要内容，如果未能解决你的问题，请参考以下文章
使用underscore模块的template功能实现对HTML的数据注入+template实现数据注入（后面更新）