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/