在客户端渲染数据时，一般可通过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":"u5b89u5e86u5e02","cityPinYin":"anqingshi"},{"cityId":210300,"cityName":"u978du5c71u5e02","cityPinYin":"anshanshi"},{"cityId":410500,"cityName":"u5b89u9633u5e02","cityPinYin":"anyangshi"},{"cityId":340300,"cityName":"u868cu57e0u5e02","cityPinYin":"bangbushi"},{"cityId":130600,"cityName":"u4fddu5b9au5e02","cityPinYin":"baodingshi"},{"cityId":110100,"cityName":"u5317u4eacu5e02","cityPinYin":"beijingshi"},{"cityId":530500,"cityName":"u4fddu5c71u5e02","cityPinYin":"baoshanshi"},{"cityId":150200,"cityName":"u5305u5934u5e02","cityPinYin":"baotoushi"},{"cityId":341600,"cityName":"u4eb3u5ddeu5e02","cityPinYin":"bozhoushi"},{"cityId":220100,"cityName":"u957fu6625u5e02","cityPinYin":"changchunshi"},{"cityId":430700,"cityName":"u5e38u5fb7u5e02","cityPinYin":"changdeshi"},{"cityId":510100,"cityName":"u6210u90fdu5e02","cityPinYin":"chengdoushi"},{"cityId":150400,"cityName":"u8d64u5cf0u5e02","cityPinYin":"chifengshi"},{"cityId":500100,"cityName":"u91cdu5e86u5e02","cityPinYin":"chongqingshi"},{"cityId":430100,"cityName":"u957fu6c99u5e02","cityPinYin":"changshashi"},{"cityId":130900,"cityName":"u6ca7u5ddeu5e02","cityPinYin":"cangzhoushi"},{"cityId":320400,"cityName":"u5e38u5ddeu5e02","cityPinYin":"changzhoushi"},{"cityId":431000,"cityName":"u90f4u5ddeu5e02","cityPinYin":"chenzhoushi"},{"cityId":210600,"cityName":"u4e39u4e1cu5e02","cityPinYin":"dandongshi"},{"cityId":441900,"cityName":"u4e1cu839eu5e02","cityPinYin":"dongguanshi"},{"cityId":210200,"cityName":"u5927u8fdeu5e02","cityPinYin":"dalianshi"},{"cityId":230600,"cityName":"u5927u5e86u5e02","cityPinYin":"daqingshi"},{"cityId":370500,"cityName":"u4e1cu8425u5e02","cityPinYin":"dongyingshi"},{"cityId":371400,"cityName":"u5fb7u5ddeu5e02","cityPinYin":"dezhoushi"},{"cityId":440600,"cityName":"u4f5bu5c71u5e02","cityPinYin":"foshanshi"},{"cityId":210400,"cityName":"u629au987au5e02","cityPinYin":"fushunshi"},{"cityId":341200,"cityName":"u961cu9633u5e02","cityPinYin":"fuyangshi"},{"cityId":361000,"cityName":"u629au5ddeu5e02","cityPinYin":"fuzhoushi"},{"cityId":350100,"cityName":"u798fu5ddeu5e02","cityPinYin":"fuzhoushi"},{"cityId":450300,"cityName":"u6842u6797u5e02","cityPinYin":"guilinshi"},{"cityId":510800,"cityName":"u5e7fu5143u5e02","cityPinYin":"guangyuanshi"},{"cityId":640400,"cityName":"u56fau539fu5e02","cityPinYin":"guyuanshi"},{"cityId":440100,"cityName":"u5e7fu5ddeu5e02","cityPinYin":"guangzhoushi"},{"cityId":360700,"cityName":"u8d63u5ddeu5e02","cityPinYin":"ganzhoushi"},{"cityId":320800,"cityName":"u6deeu5b89u5e02","cityPinYin":"huaianshi"},{"cityId":130400,"cityName":"u90afu90f8u5e02","cityPinYin":"handanshi"},{"cityId":230100,"cityName":"u54c8u5c14u6ee8u5e02","cityPinYin":"haerbinshi"},{"cityId":340100,"cityName":"u5408u80a5u5e02","cityPinYin":"hefeishi"},{"cityId":150100,"cityName":"u547cu548cu6d69u7279u5e02","cityPinYin":"huhehaoteshi"},{"cityId":431200,"cityName":"u6000u5316u5e02","cityPinYin":"huaihuashi"},{"cityId":150700,"cityName":"u547cu4f26u8d1du5c14u5e02","cityPinYin":"hulunbeiershi"},{"cityId":420200,"cityName":"u9ec4u77f3u5e02","cityPinYin":"huangshishi"},{"cityId":430400,"cityName":"u8861u9633u5e02","cityPinYin":"hengyangshi"},{"cityId":330500,"cityName":"u6e56u5ddeu5e02","cityPinYin":"huzhoushi"},{"cityId":330100,"cityName":"u676du5ddeu5e02","cityPinYin":"hangzhoushi"},{"cityId":441300,"cityName":"u60e0u5ddeu5e02","cityPinYin":"huizhoushi"},{"cityId":360800,"cityName":"u5409u5b89u5e02","cityPinYin":"jianshi"},{"cityId":330700,"cityName":"u91d1u534eu5e02","cityPinYin":"jinhuashi"},{"cityId":440700,"cityName":"u6c5fu95e8u5e02","cityPinYin":"jiangmenshi"},{"cityId":230800,"cityName":"u4f73u6728u65afu5e02","cityPinYin":"jiamusishi"},{"cityId":370800,"cityName":"u6d4eu5b81u5e02","cityPinYin":"jiningshi"},{"cityId":370100,"cityName":"u6d4eu5357u5e02","cityPinYin":"jinanshi"},{"cityId":330400,"cityName":"u5609u5174u5e02","cityPinYin":"jiaxingshi"},{"cityId":445200,"cityName":"u63edu9633u5e02","cityPinYin":"jieyangshi"},{"cityId":210700,"cityName":"u9526u5ddeu5e02","cityPinYin":"jinzhoushi"},{"cityId":421000,"cityName":"u8346u5ddeu5e02","cityPinYin":"jingzhoushi"},{"cityId":410200,"cityName":"u5f00u5c01u5e02","cityPinYin":"kaifengshi"},{"cityId":530100,"cityName":"u6606u660eu5e02","cityPinYin":"kunmingshi"},{"cityId":131000,"cityName":"u5ecau574au5e02","cityPinYin":"langfangshi"},{"cityId":411100,"cityName":"u6f2fu6cb3u5e02","cityPinYin":"luoheshi"},{"cityId":320700,"cityName":"u8fdeu4e91u6e2fu5e02","cityPinYin":"lianyungangshi"},{"cityId":350800,"cityName":"u9f99u5ca9u5e02","cityPinYin":"longyanshi"},{"cityId":410300,"cityName":"u6d1bu9633u5e02","cityPinYin":"luoyangshi"},{"cityId":620100,"cityName":"u5170u5ddeu5e02","cityPinYin":"lanzhoushi"},{"cityId":450200,"cityName":"u67f3u5ddeu5e02","cityPinYin":"liuzhoushi"},{"cityId":340500,"cityName":"u9a6cu978du5c71u5e02","cityPinYin":"maanshanshi"},{"cityId":440900,"cityName":"u8302u540du5e02","cityPinYin":"maomingshi"},{"cityId":510700,"cityName":"u7ef5u9633u5e02","cityPinYin":"mianyangshi"},{"cityId":330200,"cityName":"u5b81u6ce2u5e02","cityPinYin":"ningboshi"},{"cityId":360100,"cityName":"u5357u660cu5e02","cityPinYin":"nanchangshi"},{"cityId":350900,"cityName":"u5b81u5fb7u5e02","cityPinYin":"ningdeshi"},{"cityId":511000,"cityName":"u5185u6c5fu5e02","cityPinYin":"neijiangshi"},{"cityId":320100,"cityName":"u5357u4eacu5e02","cityPinYin":"nanjingshi"},{"cityId":450100,"cityName":"u5357u5b81u5e02","cityPinYin":"nanningshi"},{"cityId":320600,"cityName":"u5357u901au5e02","cityPinYin":"nantongshi"},{"cityId":350300,"cityName":"u8386u7530u5e02","cityPinYin":"putianshi"},{"cityId":370200,"cityName":"u9752u5c9bu5e02","cityPinYin":"qingdaoshi"},{"cityId":130300,"cityName":"u79e6u7687u5c9bu5e02","cityPinYin":"qinhuangdaoshi"},{"cityId":230200,"cityName":"u9f50u9f50u54c8u5c14u5e02","cityPinYin":"qiqihaershi"},{"cityId":350500,"cityName":"u6cc9u5ddeu5e02","cityPinYin":"quanzhoushi"},{"cityId":231200,"cityName":"u7ee5u5316u5e02","cityPinYin":"suihuashi"},{"cityId":310100,"cityName":"u4e0au6d77u5e02","cityPinYin":"shanghaishi"},{"cityId":130100,"cityName":"u77f3u5bb6u5e84u5e02","cityPinYin":"shijiazhuangshi"},{"cityId":330600,"cityName":"u7ecdu5174u5e02","cityPinYin":"shaoxingshi"},{"cityId":430500,"cityName":"u90b5u9633u5e02","cityPinYin":"shaoyangshi"},{"cityId":210100,"cityName":"u6c88u9633u5e02","cityPinYin":"shenyangshi"},{"cityId":140600,"cityName":"u6714u5ddeu5e02","cityPinYin":"shuozhoushi"},{"cityId":440300,"cityName":"u6df1u5733u5e02","cityPinYin":"shenzhenshi"},{"cityId":320500,"cityName":"u82cfu5ddeu5e02","cityPinYin":"suzhoushi"},{"cityId":370900,"cityName":"u6cf0u5b89u5e02","cityPinYin":"taianshi"},{"cityId":120100,"cityName":"u5929u6d25u5e02","cityPinYin":"tianjinshi"},{"cityId":340700,"cityName":"u94dcu9675u5e02","cityPinYin":"tonglingshi"},{"cityId":130200,"cityName":"u5510u5c71u5e02","cityPinYin":"tangshanshi"},{"cityId":140100,"cityName":"u592au539fu5e02","cityPinYin":"taiyuanshi"},{"cityId":321200,"cityName":"u6cf0u5ddeu5e02","cityPinYin":"taizhoushi"},{"cityId":370700,"cityName":"u6f4du574au5e02","cityPinYin":"weifangshi"},{"cityId":420100,"cityName":"u6b66u6c49u5e02","cityPinYin":"wuhanshi"},{"cityId":340200,"cityName":"u829cu6e56u5e02","cityPinYin":"wuhushi"},{"cityId":610500,"cityName":"u6e2du5357u5e02","cityPinYin":"weinanshi"},{"cityId":320200,"cityName":"u65e0u9521u5e02","cityPinYin":"wuxishi"},{"cityId":330300,"cityName":"u6e29u5ddeu5e02","cityPinYin":"wenzhoushi"},{"cityId":610100,"cityName":"u897fu5b89u5e02","cityPinYin":"xianshi"},{"cityId":341800,"cityName":"u5ba3u57ceu5e02","cityPinYin":"xuanchengshi"},{"cityId":411000,"cityName":"u8bb8u660cu5e02","cityPinYin":"xuchangshi"},{"cityId":420900,"cityName":"u5b5du611fu5e02","cityPinYin":"xiaoganshi"},{"cityId":350200,"cityName":"u53a6u95e8u5e02","cityPinYin":"xiamenshi"},{"cityId":532800,"cityName":"u897fu53ccu7248u7eb3u50a3u65cfu81eau6cbbu5dde","cityPinYin":"xishuangbannadaizuzizhizhou"},{"cityId":130500,"cityName":"u90a2u53f0u5e02","cityPinYin":"xingtaishi"},{"cityId":430300,"cityName":"u6e58u6f6du5e02","cityPinYin":"xiangtanshi"},{"cityId":410700,"cityName":"u65b0u4e61u5e02","cityPinYin":"xinxiangshi"},{"cityId":433100,"cityName":"u6e58u897fu571fu5bb6u65cfu82d7u65cfu81eau6cbbu5dde","cityPinYin":"xiangxitujiazumiaozuzizhizhou"},{"cityId":360500,"cityName":"u65b0u4f59u5e02","cityPinYin":"xinyushi"},{"cityId":420600,"cityName":"u8944u9633u5e02","cityPinYin":"xiangyangshi"},{"cityId":320300,"cityName":"u5f90u5ddeu5e02","cityPinYin":"xuzhoushi"},{"cityId":511500,"cityName":"u5b9cu5bbeu5e02","cityPinYin":"yibinshi"},{"cityId":640100,"cityName":"u94f6u5dddu5e02","cityPinYin":"yinchuanshi"},{"cityId":320900,"cityName":"u76d0u57ceu5e02","cityPinYin":"yanchengshi"},{"cityId":420500,"cityName":"u5b9cu660cu5e02","cityPinYin":"yichangshi"},{"cityId":360900,"cityName":"u5b9cu6625u5e02","cityPinYin":"yichunshi"},{"cityId":210800,"cityName":"u8425u53e3u5e02","cityPinYin":"yingkoushi"},{"cityId":370600,"cityName":"u70dfu53f0u5e02","cityPinYin":"yantaishi"},{"cityId":430600,"cityName":"u5cb3u9633u5e02","cityPinYin":"yueyangshi"},{"cityId":430900,"cityName":"u76cau9633u5e02","cityPinYin":"yiyangshi"},{"cityId":321000,"cityName":"u626cu5ddeu5e02","cityPinYin":"yangzhoushi"},{"cityId":431100,"cityName":"u6c38u5ddeu5e02","cityPinYin":"yongzhoushi"},{"cityId":440400,"cityName":"u73e0u6d77u5e02","cityPinYin":"zhuhaishi"},{"cityId":130700,"cityName":"u5f20u5bb6u53e3u5e02","cityPinYin":"zhangjiakoushi"},{"cityId":321100,"cityName":"u9547u6c5fu5e02","cityPinYin":"zhenjiangshi"},{"cityId":440800,"cityName":"u6e5bu6c5fu5e02","cityPinYin":"zhanjiangshi"},{"cityId":330900,"cityName":"u821fu5c71u5e02","cityPinYin":"zhoushanshi"},{"cityId":640500,"cityName":"u4e2du536bu5e02","cityPinYin":"zhongweishi"},{"cityId":430200,"cityName":"u682au6d32u5e02","cityPinYin":"zhuzhoushi"},{"cityId":350600,"cityName":"u6f33u5ddeu5e02","cityPinYin":"zhangzhoushi"},{"cityId":410100,"cityName":"u90d1u5ddeu5e02","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/