重新排版与堂堂88

先看下简单示例：

  1. <script type="type='text/html'" id="jianren">
  2.               <div class="wrap">
  3.                 <div class="recommend"> <a class="banner" href=""><img src="{theme:img/<%=cateid%>.jpg}" class="ui-fb" alt=""></a>
  4.                   <div class="brand">
  5.                 <div class="list" >
  6.                    <% for (var i = ; i < category.length; i ++) { %>　　　　　　//使用for循环
  7.                        <a href="{url:/site/pro_list/brand/<%=category[i].id%>/cat/<%=cateid%>}"><%=category[i].name%></a>　　//输出
  8.                    <%}%>
  9.                   </div>
  10.                 </div>
  11.                 <div class="list" >
  12. <% for (var i = ; i < list.length; i ++) { %>
  13.         <div class="item"  >
  14.                  <a href="<%=list[i].goods.url%>" class="good">
  15.                     <div class="img"> <img class="ui-fb" src="<%=list[i].goods.img%>"> </div>
  16.                     <div class="summary">
  17.                       <div class="selling"> <span><%=list[i].goods.sale%>人已购买</span> </div>
  18.                       <h2><%=list[i].goods.name%></h2>
  19.                       <div class="adds">
  20.                         <div class="prices">
  21.                           <p class="o-price"><i class="ui-yen">￥</i><del><%=list[i].goods.market_price%></del></p>
  22.                           <p class="price"><i class="ui-yen">￥</i><b><%=list[i].goods.sell_price%></b></p>
  23.                         </div>
  24.                       </div>
  25.                       <button class="ui-cart"  src="<%=list[i].goods.url%>"></button>
  26.                     </div>
  27.                     </a>
  28.                     <a class="category" href="{url:/site/pro_list/cat/<%=list[i].goods.id%>}"><%=list[i].goods.catename%></a>
  29.           </div>
  30.     <% } %>
  31.     </div>
  32. </script>

插入：

  1. <script type="text/javascript">
  2.   $('#rscrolleRect li').click(function(){//获取数据
  3.         $.post('{url:/site/getcategoryjson}',{'id':cartId},function(data){
  4.             if(data){
  5. var datas = data;
  6.              var addressLiHtml = template('jianren',datas);
  7.            //  alert(addressLiHtml);
  8.              $('.pannel').eq(clickcur).html(addressLiHtml);
  9.             //  alert(addressLiHtml);
  10.             }
  11.         },'json');　　　　//别特麻痹的忘了JSON
  12.   })
  13. </script>

data数据：（课外知识....）json数据:

  1. {
  2.     "list": [
  3.         {
  4.             "goods": {
  5.                 "sale": "22",
  6.                 "name": "西红柿",
  7.                 "market_price": "0.00",
  8.                 "sell_price": "2.98",
  9.                 "url": "/index.php?cond=1033",
  10.                 "img": "upload/2014/12/0jpg",
  11.                 "id": "56",
  12.                 "catename": "花果"
  13.             }
  14.         },
  15.         {
  16.             "goods": {
  17.                 "sale": "31",
  18.                 "name": "大土豆",
  19.                 "market_price": "0.00",
  20.                 "sell_price": "2.68",
  21.                 "url": "/index.php?cid=1036",
  22.                 "img": "upload/2014/121054567.jpg",
  23.                 "id": "55",
  24.                 "catename": "根茎"
  25.             }
  26.         },
  27.         {
  28.             "goods": {
  29.                 "sale": "71",
  30.                 "name": "大白菜",
  31.                 "market_price": "0.00",
  32.                 "sell_price": "1.58",
  33.                 "url": "/index.php?con&id=1038",
  34.                 "img": "upload/2014042143313.jpg",
  35.                 "id": "54",
  36.                 "catename": "叶菜"
  37.             }
  38.         },
  39.         {
  40.             "goods": {
  41.                 "sale": "7",
  42.                 "name": "有机菜花",
  43.                 "market_price": "0.00",
  44.                 "sell_price": "4.98",
  45.                 "url": "/index.php?controle&actits&id=1039",
  46.                 "img": "upload/2014/12/9042832888.jpg",
  47.                 "id": "56",
  48.                 "catename": "花果"
  49.             }
  50.         },
  51.         {
  52.             "goods": {
  53.                 "sale": "13",
  54.                 "name": "西葫芦",
  55.                 "market_price": "0.00",
  56.                 "sell_price": "1.68",
  57.                 "url": "/index.php?controller=site&action=products&id=1041",
  58.                 "img": "upload/2014/12/09043237452.jpg",
  59.                 "id": "56",
  60.                 "catename": "花果"
  61.             }
  62.         },
  63.         {
  64.             "goods": {
  65.                 "sale": "6",
  66.                 "name": "净藕",
  67.                 "market_price": "0.00",
  68.                 "sell_price": "3.98",
  69.                 "url": "/index.php?coucts&id=1043",
  70.                 "img": "upload/2014/044128578.jpg",
  71.                 "id": "55",
  72.                 "catename": "根茎"
  73.             }
  74.         },
  75.         {
  76.             "goods": {
  77.                 "sale": "1",
  78.                 "name": "姜",
  79.                 "market_price": "0.00",
  80.                 "sell_price": "4.98",
  81.                 "url": "/index.php?controlle=products&id=1044",
  82.                 "img": "upload/2014/12/09/20141209044441656.jpg",
  83.                 "id": "55",
  84.                 "catename": "根茎"
  85.             }
  86.         },
  87.         {
  88.             "goods": {
  89.                 "sale": "6",
  90.                 "name": "黄瓜",
  91.                 "market_price": "0.00",
  92.                 "sell_price": "2.38",
  93.                 "url": "/index.php?contrroducts&id=1045",
  94.                 "img": "upload/20045058992.jpg",
  95.                 "id": "56",
  96.                 "catename": "花果"
  97.             }
  98.         },
  99.         {
  100.             "goods": {
  101.                 "sale": "5",
  102.                 "name": "500g",
  103.                 "market_price": "0.00",
  104.                 "sell_price": "0.98",
  105.                 "url": "/index.php?controon=products&id=1048",
  106.                 "img": "upload/2014/12/09/20141209045623798.jpg",
  107.                 "id": "54",
  108.                 "catename": "叶菜"
  109.             }
  110.         },
  111.         {
  112.             "goods": {
  113.                 "sale": "13",
  114.                 "name": "500g",
  115.                 "market_price": "0.00",
  116.                 "sell_price": "3.68",
  117.                 "url": "/index.php?controller=site&action=products&id=1049",
  118.                 "img": "upload/2014/12/09/20141209050100564.jpg",
  119.                 "id": "56",
  120.                 "catename": "花果"
  121.             }
  122.         },
  123.         {
  124.             "goods": {
  125.                 "sale": "3",
  126.                 "name": "500g",
  127.                 "market_price": "0.00",
  128.                 "sell_price": "4.98",
  129.                 "url": "/index.php?controloducts&id=1050",
  130.                 "img": "upload/2014/12/10/20141210082407662.jpg",
  131.                 "id": "56",
  132.                 "catename": "花果"
  133.             }
  134.         },
  135.         {
  136.             "goods": {
  137.                 "sale": "16",
  138.                 "name": "胡500g",
  139.                 "market_price": "0.00",
  140.                 "sell_price": "0.98",
  141.                 "url": "/index.php?controucts&id=1051",
  142.                 "img": "upload/2014/12jpg",
  143.                 "id": "55",
  144.                 "catename": "根茎"
  145.             }
  146.         },
  147.         {
  148.             "goods": {
  149.                 "sale": "11",
  150.                 "name": "小500g",
  151.                 "market_price": "0.00",
  152.                 "sell_price": "1.98",
  153.                 "url": "/index.php?controlproducts&id=1052",
  154.                 "img": "upload/2014/12988.jpg",
  155.                 "id": "55",
  156.                 "catename": "根茎"
  157.             }
  158.         },
  159.         {
  160.             "goods": {
  161.                 "sale": "12",
  162.                 "name": "砀500g",
  163.                 "market_price": "0.00",
  164.                 "sell_price": "2.98",
  165.                 "url": "/index.php?controllcts&id=1054",
  166.                 "img": "upload/2014/12/10/268.jpg",
  167.                 "id": "61",
  168.                 "catename": "梨类"
  169.             }
  170.         },
  171.         {
  172.             "goods": {
  173.                 "sale": "2",
  174.                 "name": "面500g",
  175.                 "market_price": "0.00",
  176.                 "sell_price": "5.28",
  177.                 "url": "/index.php?controllerducts&id=1055",
  178.                 "img": "upload/2014/12/137.jpg",
  179.                 "id": "55",
  180.                 "catename": "根茎"
  181.             }
  182.         },
  183.         {
  184.             "goods": {
  185.                 "sale": "11",
  186.                 "name": "500g",
  187.                 "market_price": "0.00",
  188.                 "sell_price": "1.50",
  189.                 "url": "/index.php?controproducts&id=1057",
  190.                 "img": "upload/2014/12/10/20141210085912276.jpg",
  191.                 "id": "58",
  192.                 "catename": "调味"
  193.             }
  194.         },
  195.         {
  196.             "goods": {
  197.                 "sale": "21",
  198.                 "name": "福建500g",
  199.                 "market_price": "0.00",
  200.                 "sell_price": "3.98",
  201.                 "url": "/index.php?controlleion=products&id=1058",
  202.                 "img": "upload/2014/90.jpg",
  203.                 "id": "48",
  204.                 "catename": "新鲜水果"
  205.             }
  206.         },
  207.         {
  208.             "goods": {
  209.                 "sale": "17",
  210.                 "name": "水500g",
  211.                 "market_price": "0.00",
  212.                 "sell_price": "0.98",
  213.                 "url": "/index.php?controller=site&actid=1060",
  214.                 "img": "upload/2014/12/10/20141210092738197.jpg",
  215.                 "id": "55",
  216.                 "catename": "根茎"
  217.             }
  218.         },
  219.         {
  220.             "goods": {
  221.                 "sale": "2",
  222.                 "name": "杏菇500g",
  223.                 "market_price": "0.00",
  224.                 "sell_price": "3.98",
  225.                 "url": "/index.php?controller=site&action=p062",
  226.                 "img": "upload/2014/12/10jpg",
  227.                 "id": "57",
  228.                 "catename": "菇菌"
  229.             }
  230.         },
  231.         {
  232.             "goods": {
  233.                 "sale": "0",
  234.                 "name": "腿500g",
  235.                 "market_price": "0.00",
  236.                 "sell_price": "10.80",
  237.                 "url": "/index.php?controlid=1065",
  238.                 "img": "upload/2014/12/10/20141210095526338.jpg",
  239.                 "id": "68",
  240.                 "catename": "禽类"
  241.             }
  242.         }
  243.     ],
  244.     "cateid": "39",　　　　　　//   这里直接调用 <%=cateid%>
  245.     "category": [　　　　　　　//   这里可以使用for 循环
  246.         {　　　　　　　　　　　 //   <%for(var i= 0;i<category.length;i++){%>
  247.             "id": "20",　　　 //         <%=category[i].id%>  上面goods的形式 <%=category[i].goods.id%>
  248.             "name": "湖"　　　//   <%}%>
  249.         },
  250.         {
  251.             "id": "81",
  252.             "name": ""
  253.         },
  254.         {
  255.             "id": "82",
  256.             "name": ""
  257.         },
  258.         {
  259.             "id": "83",
  260.             "name": ""
  261.         }
  262.     ]
  263. }

1.这些是别人的经验看不懂。。。。也烦躁  不愿意看 ，烦   烦呀   谁爱看谁看去吧

JsRender三要素和行为

　　从上面贴的代码可以看出，JsRender需要三要素：模板（Template）、容器（Container：简单。。。）、数据（Data：数据可以使各种js对象：如数组，object等等）。主要行为为：渲染模板、将渲染结果插入容器（这个太简单了）。说下渲染模板先。。。

JsRender渲染模板

　　1、无需编译直接渲染：

  1. var html = $("#XXXXX").render(data); // XXX代表某个脚本标记，也就是上面的<script id="XXX" type="text/x-jsrender">.......</script>

　　2、渲染前编译：

  1. /*A、获取模板对象的方式编译*/
  2. var xxxTemplate = $.templates("#xxxTemplate");//既可以是字符串也可以是脚本标记，B是字符串
  3. var html = xxxTemplate.render(data);
  4. /*B、指定模板名称的方式编译*/
  5. $.templates('xxx','<b>{{:name}}</b>');
  6. $.templates({
  7. 　　'yyy','<b>{{:name}}</b>',
  8. 　　'zzz','<b>{{:name}}</b>'
  9. })；
  10. var html = $.render.xxx(data);//注意，第B种方式可以同时渲染多个模板，但是第A种方式不行　　　　　　

JsRender模板（Template）

　基本的jsRender标签

描述 例子 输出
参数firstName的值（未被Html编码） {{:firstName}} Madelyn
参数movie的属性--releaseYear的值（未被html编码） {{:movie.releaseYear}} 1987
比较（表达式,未被html编码） {{:movie.releaseYear < 2000}} true
经html编码的值（更加安全，但是要耗点内存） {{>movie.name}} Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span>
经html编码的值 {{html:movie.name}} Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span>

jsrender数据遍历

  1. //Template
  2. {{for #data}}
  3.         <h3>{{:name}}</h3>
  4.         <ul>
  5.         {{for language}}
  6.              <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
  7.         {{/for}}
  8.         </ul>
  9. {{/for}}
  10. //Data
  11.  var studnets = [
  12.         {
  13.             "name": "Mingjun Tang",
  14.             "language": [{ "title": "English"},{ "title": "Franch"}]
  15.         },
  16.         {
  17.             "name": "Ming Tang",
  18.             "language": [{ "title": "English"}]
  19.         }
  20. ];

　　遍历时#data充当了students,同时#parent.parent.data.XXX可以用于向上迭代。注意这里的data并不是student中的属性额，因为#parent向上迭代后返回的是一个jsrender对象只有，#parent.data后才会返回数组内容。#parent在jsrender叫路径访问，但是我觉得这里叫向上迭代还要好些。

jsrender条件：

  1. {{if  fullprice}}
  2.     html markup
  3. {{else halfprice}}
  4.     html markup
  5. {{else}}
  6.     html markup
  7. {{/if}}
表达式 举例 注释
|| {{ :a || b }} 或
&& {{ :a && b }} 且
! {{ :!a }} 非
<= 和>=和 <和 > {{ :a <= b }} 比较
=== 和 !== {{ :a === b }} 等于和不等于

jsrender模板嵌套：

  1. <script type="text/x-jsrender" id="studentTemplate">
  2.     {{for #data}}
  3.         <h3>{{:name}}</h3>
  4.         <ul>
  5.         {{for language tmpl="#studentLanguageTemplate" /}}
  6.         </ul>
  7.     {{/for}}
  8. </script>
  9.  
  10. <script type="text/x-jsrender" id="studentLanguageTemplate">
  11.     <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
  12. </script>
  13. //render
  14. $("#studentList").html($("#studentTemplate").render(studnets));

这样就可以避免无限的嵌套下去，只需要设置{{for}}的tmpl属性即可。这时，tmpl是一个脚本标记。如果studentLanguageTemplate已经被$.templates()编译，那么也可以这么写：

  1. <script type="text/x-jsrender" id="studentTemplate">
  2.     {{for #data}}
  3.         <h3>{{:name}}</h3>
  4.         <ul>
  5.         {{for language tmpl="studentLanguageTemplate" /}}
  6.         </ul>
  7.     {{/for}}
  8. </script>
  9.  
  10. <script type="text/x-jsrender" id="studentLanguageTemplate">
  11.     <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
  12. </script>
  13. //render
  14. $.templates("studentLanguageTemplate", "#studentLanguageTemplate");
  15. $("#studentList").html($("#studentTemplate").render(studnets));

Jquery模板-----JsRender的更多相关文章

  1. 下一代Jquery模板-----JsRender

    在ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender中提到了JsRender.JsRedner和JsViews(JsViews是再JsRender基础 ...

  2. jQuery模板插件jsrender

    前几天学习jqm+phonegap,用到了一个jquery插件jsrender,(由于app不能用asp.net的服务端控件了,所以我也是醉了...),用于循环展示一下数据. 下面是我用到的几个简单用 ...

  3. 10 个强大的JavaScript / jQuery 模板引擎推荐

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...

  4. jquery模板下载网站

    jquery模板下载网站 http://www.jqshare.com/

  5. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  6. jQuery 模板插件jquery-tmpl

    Step1:导入脚本: <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")">&l ...

  7. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  8. javascript/jquery模板引擎——Handlebars初体验

    Handlebars.js下载地址:http://handlebarsjs.com/ 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分.其中有项功能是需要ajax调用后端接口,返回 ...

  9. JQuery模板插件-jquery.tmpl

    转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...

随机推荐

  1. SQL注入之Sqli-labs系列第十五关和第十六关（基于POST的时间盲注）

    开始挑战第十五关(Blind- Boolian Based- String)和 第十六关(Blind- Time Based- Double quotes- String) 访问地址,输入报错语句 ' ...

  2. 压缩文件破解rarcrack-支持格式zip，rar和7z

    Kali上没有,需要自己安装 apt-get install rarcrack 安装成功后, 新建一个文本文档,元素: <?xml version="1.0" encodin ...

  3. 给Linux服务器设置共享文件目录

    通过samba软件 :yum install samba 修改配置文件:vi /etc/samba/smb.conf 添加 [WORKSPACE] comment = workspace       ...

  4. 2017.4.9 函数式编程FP

    函数编程(简称FP)不只代指Haskell Scala等之类的语言,还表示一种编程范式,和面向对象的编程方式一样,是编程思维,软件思考方式,也称面向函数编程. 编程的本质是组合,组合的本质是范畴Cat ...

  5. 【java编程】使用System.getProperty方法，如何配置JVM系统属性

    转载:https://www.cnblogs.com/acm-bingzi/p/6673823.html很多时候我们需要在项目中读取外部属性文件,用到了System.getProperty(" ...

  6. LG4091 【[HEOI2016/TJOI2016]求和】

    前置:第二类斯特林数 表示把\(n\)个小球放入\(m\)个不可区分的盒子的方案数 使用容斥原理分析,假设盒子可区分枚举至少有几个盒子为空,得到通项: \[S(n,m)=\frac{1}{m!}\su ...

  7. spring获取jdbc链接底层原理

    获取连接池的连接二种逻辑 1.一个事务中,一个连接 (底层逻辑:threadlocal存储  里面是map: key是数据源,value:链接) map存储应该是为多数据源使用的2.没有事务的serv ...

  8. LVS简介及使用

    一.LVS是什么? LVS的英文全称是Linux Virtual Server,即Linux虚拟服务器.它是我们国家的章文嵩博士的一个开源项目.在linux内存2.6中,它已经成为内核的一部分,在此之 ...

  9. MySQL Transaction--TPS计算规则

    TPS计算规则 在MYSQL 中,TPS(Transaction Per Second)的计算方法为 (com_commit+com_rollback)/time,但com_commit和com_ro ...

  10. 22 初始模块 random time collections functools

    一 .初始模块 1.从⼩到⼤的顺序: ⼀条代码 < 语句块 < 代码块(函数, 类) < 模块 2.引入模块的方式 ①   import   模块 ②   from   模块  im ...