在客户端渲染数据时，一般可通过underscore中的template对数据模板进行渲染，例如：

定义模板，需要把type类型设置为“text/template”

  1. <script type="text/template" id="tpl">
  2. <% _.each(data, function (item) { %>
  3.   <div class="outer">
  4.     <%= item.title %> - <%= item.url %> - <%= item.film %>
  5.   </div>
  6. <% }); %>
  7. </script>

在js调用模板的时候，传入模板数据，例如：

  1. var datas = [
  2.   {
  3.     title: '标题1',
  4.     url: 'http://www.baidu.com',
  5.     film: '电影名称1'
  6.   },
  7.   {
  8.     title: '标题2',
  9.     url: 'http://www.baidu.com',
  10.     film: '电影名称2'
  11.   },
  12.   {
  13.     title: '标题3',
  14.     url: 'http://www.baidu.com',
  15.     film: '电影名称3'
  16.   },
  17.   {
  18.     title: '标题4',
  19.     url: 'http://www.baidu.com',
  20.     film: '电影名称4'
  21.   },
  22.   {
  23.     title: '标题5',
  24.     url: 'http://www.baidu.com',
  25.     film: '电影名称5'
  26.   }
  27.   ,
  28.   {
  29.     title: '标题6666',
  30.     url: 'http://www.baidu.com',
  31.     film: '电影名称5'
  32.   }
  33. ];
  34.  
  35. var t=_.template($("#tpl").html());
  36. $('#content').html(t({"data":datas}));  //这里把模板中的数据源取别名为data,则模板中的数据源也用这个别名，与此保持一致

例如：根据拼音首字母对城市进行分组，代码如下：

首先数据源文件city.js中的数据格式如下；

  1. {"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请求数据组装数据：

  1.  var isTest = (window.location.href.indexOf('localhost') >0 || window.location.href.indexOf('127.0.0.1') >0);
  2.     var url = isTest ? './data/city.js' : '真实url';
  3.     var cityMap={};
  4.     $.ajax({
  5.         type:"Get",
  6.         url:url,
  7.         timeout:5000,
  8.         data:"",
  9.         success:function(result){
  10.             if(isTest){
  11.                 result=JSON.parse(result);
  12.             }
  13.             //alert(result.data);
  14.            if(result.data && result.data.length>0){
  15.                    $.each(result.data,function(i,item){
  16.                        var firstChar=item.cityPinYin.charAt(0).toUpperCase();
  17.                        cityMap[firstChar]=cityMap[firstChar]?cityMap[firstChar]:[];
  18.                        cityMap[firstChar].push({
  19.                            cityId:item.cityId,
  20.                            cityName:item.cityName
  21.                        });
  22.                    });
  23.  
  24.                 //获得模板
  25.                 var lettTemp=_.template($("#letterList").html());
  26.                 var cityTemp=_.template($("#cityList").html());
  27.  
  28.                //渲染模板
  29.               $("#fixedNav").html(lettTemp({"data":cityMap}));
  30.                $("#contentList").append(cityTemp({"data":cityMap}));
  31.  
  32.                 // $.each(cityMap,function(key,item){
  33.                 //    console.log("key="+key);
  34.                 //    $.each(item,function(i,city){
  35.                 //       console.log("cityName="+city.cityName);
  36.                 //    })
  37.                 // });
  38.                 // console.log(cityMap);
  39.  
  40.            }
  41.         }
  42.  
  43.     })

模板：

  1. <script type="text/template" id="letterList">
  2.       <a href="javascript:;" style="line-height: 27.2727px;" class="">*</a>
  3.       <%_.each(data,function(value,index,obj){%>
  4.           <a href="javascript:void(0)" class="ng-binding ng-scope" style="line-height: 27.2727px;" data-id="<%=index%>"><%=index%></a>
  5.       <%})%>
  6. </script>
  7.  
  8. <script type="text/template" id="cityList">
  9.       <%_.each(data,function(cityList,index){%>
  10.           <div class="ng-scope">
  11.               <dt class="ng-binding" id="<%=index%>">
  12.                    <%=index%>
  13.               </dt>
  14.               <%_.each(cityList,function(item,index){%>
  15.                     <dd  class="ng-binding ng-scope" data-id="<%=item.cityId%>"><%=item.cityName%></dd>
  16.              <%})%>
  17.            </div>
  18.       <%})%>
  19. </script>

备注：

例如如上模板渲染中的_.each方法，此方法中第一个参数为value值，第二个参数为index值，区别与jquery中的$.each方法

具体此方法的用法请参考官方文档

以及：http://blog.itrunc.com/2014/04/29/underscore-each/

underscore中template的使用Demo的更多相关文章

  1. 理解Underscore中的_.template函数

    Underscore中提供了_.template函数实现模板引擎功能,它可以将JSON数据源中的数据对应的填充到提供的字符串中去,类似于服务端渲染的模板引擎.接下来看一下Underscore是如何实现 ...

  2. HTML5中<template>标签的详细介绍

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

  3. 关于 underscore 中模板引擎的应用演示样例

    //关于 underscore 中模板引擎的应用演示样例 <!doctype html> <html> <head> <meta charset=" ...

  4. Python中Template使用的一个小技巧

    Python中Template是string中的一个类,可以将字符串的格式固定下来,重复利用. from string import Template s = Template("there ...

  5. C++中template的简单用法

    模板(Template)指C++程序设计设计语言中采用类型作为参数的程序设计,支持通用程序设计.C++ 的标准库提供许多有用的函数大多结合了模板的观念,如STL以及IO Stream.使用模板可以使用 ...

  6. 理解Underscore中的uniq函数

    uniq函数,是Underscore中的一个数组去重函数,给它传递一个数组,它将会返回该数组的去重副本. 1 ES6版本去重 在ES6版本中,引入了一个新的数据结构——set,这是一种类似数组的数据结 ...

  7. 理解Underscore中的flatten函数

    最近是在所在实习公司的第一个sprint,有个朋友又请假了,所以任务比较重,一直这么久都没怎么更新了,这个周末赖了个床,纠结了一会儿决定还是继续写这个系列,虽然比较乏味,但是学到的东西还是很多的. 之 ...

  8. 理解Underscore中的_.bind函数

    最近一直忙于实习以及毕业设计的事情,所以上周阅读源码之后本周就一直没有进展.今天在写完开题报告之后又抽空看了一眼Underscore源码,发现上次没有看明白的一个函数忽然就豁然开朗了,于是赶紧写下了这 ...

  9. 理解Underscore中的节流函数

    上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续 ...

随机推荐

  1. Python 通过字符串调用函数、接近属性

    需求:传入的是函数名.属性名,想通过字符串调用函数,接近属性. 通过字符串接近.变动属性 变量:model_name, field_name # 获取 model model = AppConfig. ...

  2. Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  3. [转载]Apache在windows下的安装配置

    Apache在windows下的安装配置 转载自:http://blog.sina.com.cn/s/blog_536f16b00100cfat.html     1 Apache的下载 Apache ...

  4. 2015-02-09——js笔记

    示例1: 增加样式表 示例代码: function addStylesheet(url, media) {                var link = document.createEleme ...

  5. 洛谷 P1407 [国家集训队]稳定婚姻

    洛谷 这个题面很有意思,像我这样的菜鸡,完全不需考虑婚姻的稳定 性 问题. tarjan裸题,直接讲算法吧: 原配夫妻之间分别连一条边,小情人之间反向连边. 这时候我们会发现一个性质,如果婚姻稳定,那 ...

  6. php扩展redis链接失败，返回false

    刚开始接触redis,发现一直返回false,其实只要关闭防火墙就可以连接成功了. 关闭selinux操作   方法1:修改grub.conf将参数selinux=1修改为等于selinux=0,这个 ...

  7. 0x07 MySQL 多表查询

    Some Content From——Egon's Blog http://www.cnblogs.com/linhaifeng/articles/7126847.html 一 准备表 准备表 #建表 ...

  8. pip升级或卸载安装的包的方法

    先 pip list 看看包的具体名字是什么,然后 pip uninstall **包名** ===== 打印出有新版本的包: pip list --outdated --format=freeze ...

  9. python 文件格式为 txt 转换成 csv 格式

    1  txt 文件的读取 open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=Tr ...

  10. oracle 函数 截取 连接 替换 判断

    一个处理不规范日期的函数,廖记一下吧,以免再忘. --注意全角半角 CREATE OR REPLACE function f_str2form( date_string in varchar2 ) r ...