重新排版与堂堂88
先看下简单示例：
<script type="type='text/html'" id="jianren"> <div class="wrap"> <div class="recommend"> <a class="banner" href=""><img src="{theme:img/<%=cateid%>.jpg}" class="ui-fb" alt=""></a> <div class="brand"> <div class="list" > <% for (var i = 0; i < category.length; i ++) { %> //使用for循环 <a href="{url:/site/pro_list/brand/<%=category[i].id%>/cat/<%=cateid%>}"><%=category[i].name%></a> //输出 <%}%> </div> </div> <div class="list" > <% for (var i = 0; i < list.length; i ++) { %> <div class="item" > <a href="<%=list[i].goods.url%>" class="good"> <div class="img"> <img class="ui-fb" src="<%=list[i].goods.img%>"> </div> <div class="summary"> <div class="selling"> <span><%=list[i].goods.sale%>人已购买</span> </div> <h2><%=list[i].goods.name%></h2> <div class="adds"> <div class="prices"> <p class="o-price"><i class="ui-yen">￥</i><del><%=list[i].goods.market_price%></del></p> <p class="price"><i class="ui-yen">￥</i><b><%=list[i].goods.sell_price%></b></p> </div> </div> <button class="ui-cart" src="<%=list[i].goods.url%>"></button> </div> </a> <a class="category" href="{url:/site/pro_list/cat/<%=list[i].goods.id%>}"><%=list[i].goods.catename%></a> </div> <% } %> </div> </script>
插入：
<script type="text/javascript"> $('#rscrolleRect li').click(function(){//获取数据 $.post('{url:/site/getcategoryjson}',{'id':cartId},function(data){ if(data){ var datas = data; var addressLiHtml = template('jianren',datas); // alert(addressLiHtml); $('.pannel').eq(clickcur).html(addressLiHtml); // alert(addressLiHtml); } },'json'); //别特麻痹的忘了JSON }) </script>
data数据：（课外知识....）json数据:
{
"list": [
{
"goods": {
"sale": "22",
"name": "西红柿",
"market_price": "0.00",
"sell_price": "2.98",
"url": "/index.php?cond=1033",
"img": "upload/2014/12/0jpg",
"id": "56",
"catename": "花果"
}
},
{
"goods": {
"sale": "31",
"name": "大土豆",
"market_price": "0.00",
"sell_price": "2.68",
"url": "/index.php?cid=1036",
"img": "upload/2014/121054567.jpg",
"id": "55",
"catename": "根茎"
}
},
{
"goods": {
"sale": "71",
"name": "大白菜",
"market_price": "0.00",
"sell_price": "1.58",
"url": "/index.php?con&id=1038",
"img": "upload/2014042143313.jpg",
"id": "54",
"catename": "叶菜"
}
},
{
"goods": {
"sale": "7",
"name": "有机菜花",
"market_price": "0.00",
"sell_price": "4.98",
"url": "/index.php?controle&actits&id=1039",
"img": "upload/2014/12/9042832888.jpg",
"id": "56",
"catename": "花果"
}
},
{
"goods": {
"sale": "13",
"name": "西葫芦",
"market_price": "0.00",
"sell_price": "1.68",
"url": "/index.php?controller=site&action=products&id=1041",
"img": "upload/2014/12/09043237452.jpg",
"id": "56",
"catename": "花果"
}
},
{
"goods": {
"sale": "6",
"name": "净藕",
"market_price": "0.00",
"sell_price": "3.98",
"url": "/index.php?coucts&id=1043",
"img": "upload/2014/044128578.jpg",
"id": "55",
"catename": "根茎"
}
},
{
"goods": {
"sale": "1",
"name": "姜",
"market_price": "0.00",
"sell_price": "4.98",
"url": "/index.php?controlle=products&id=1044",
"img": "upload/2014/12/09/20141209044441656.jpg",
"id": "55",
"catename": "根茎"
}
},
{
"goods": {
"sale": "6",
"name": "黄瓜",
"market_price": "0.00",
"sell_price": "2.38",
"url": "/index.php?contrroducts&id=1045",
"img": "upload/20045058992.jpg",
"id": "56",
"catename": "花果"
}
},
{
"goods": {
"sale": "5",
"name": "500g",
"market_price": "0.00",
"sell_price": "0.98",
"url": "/index.php?controon=products&id=1048",
"img": "upload/2014/12/09/20141209045623798.jpg",
"id": "54",
"catename": "叶菜"
}
},
{
"goods": {
"sale": "13",
"name": "500g",
"market_price": "0.00",
"sell_price": "3.68",
"url": "/index.php?controller=site&action=products&id=1049",
"img": "upload/2014/12/09/20141209050100564.jpg",
"id": "56",
"catename": "花果"
}
},
{
"goods": {
"sale": "3",
"name": "500g",
"market_price": "0.00",
"sell_price": "4.98",
"url": "/index.php?controloducts&id=1050",
"img": "upload/2014/12/10/20141210082407662.jpg",
"id": "56",
"catename": "花果"
}
},
{
"goods": {
"sale": "16",
"name": "胡500g",
"market_price": "0.00",
"sell_price": "0.98",
"url": "/index.php?controucts&id=1051",
"img": "upload/2014/12jpg",
"id": "55",
"catename": "根茎"
}
},
{
"goods": {
"sale": "11",
"name": "小500g",
"market_price": "0.00",
"sell_price": "1.98",
"url": "/index.php?controlproducts&id=1052",
"img": "upload/2014/12988.jpg",
"id": "55",
"catename": "根茎"
}
},
{
"goods": {
"sale": "12",
"name": "砀500g",
"market_price": "0.00",
"sell_price": "2.98",
"url": "/index.php?controllcts&id=1054",
"img": "upload/2014/12/10/268.jpg",
"id": "61",
"catename": "梨类"
}
},
{
"goods": {
"sale": "2",
"name": "面500g",
"market_price": "0.00",
"sell_price": "5.28",
"url": "/index.php?controllerducts&id=1055",
"img": "upload/2014/12/137.jpg",
"id": "55",
"catename": "根茎"
}
},
{
"goods": {
"sale": "11",
"name": "500g",
"market_price": "0.00",
"sell_price": "1.50",
"url": "/index.php?controproducts&id=1057",
"img": "upload/2014/12/10/20141210085912276.jpg",
"id": "58",
"catename": "调味"
}
},
{
"goods": {
"sale": "21",
"name": "福建500g",
"market_price": "0.00",
"sell_price": "3.98",
"url": "/index.php?controlleion=products&id=1058",
"img": "upload/2014/90.jpg",
"id": "48",
"catename": "新鲜水果"
}
},
{
"goods": {
"sale": "17",
"name": "水500g",
"market_price": "0.00",
"sell_price": "0.98",
"url": "/index.php?controller=site&actid=1060",
"img": "upload/2014/12/10/20141210092738197.jpg",
"id": "55",
"catename": "根茎"
}
},
{
"goods": {
"sale": "2",
"name": "杏菇500g",
"market_price": "0.00",
"sell_price": "3.98",
"url": "/index.php?controller=site&action=p062",
"img": "upload/2014/12/10jpg",
"id": "57",
"catename": "菇菌"
}
},
{
"goods": {
"sale": "0",
"name": "腿500g",
"market_price": "0.00",
"sell_price": "10.80",
"url": "/index.php?controlid=1065",
"img": "upload/2014/12/10/20141210095526338.jpg",
"id": "68",
"catename": "禽类"
}
}
],
"cateid": "39", // 这里直接调用 <%=cateid%>
"category": [ // 这里可以使用for 循环
{ // <%for(var i= 0;i<category.length;i++){%>
"id": "20", // <%=category[i].id%> 上面goods的形式 <%=category[i].goods.id%>
"name": "湖" // <%}%>
},
{
"id": "81",
"name": ""
},
{
"id": "82",
"name": ""
},
{
"id": "83",
"name": ""
}
]
}
1.这些是别人的经验看不懂。。。。也烦躁 不愿意看 ，烦 烦呀 谁爱看谁看去吧
JsRender三要素和行为
从上面贴的代码可以看出，JsRender需要三要素：模板（Template）、容器（Container：简单。。。）、数据（Data：数据可以使各种js对象：如数组，object等等）。主要行为为：渲染模板、将渲染结果插入容器（这个太简单了）。说下渲染模板先。。。
JsRender渲染模板
1、无需编译直接渲染：
var html = $("#XXXXX").render(data); // XXX代表某个脚本标记，也就是上面的<script id="XXX" type="text/x-jsrender">.......</script>
2、渲染前编译：
/*A、获取模板对象的方式编译*/ var xxxTemplate = $.templates("#xxxTemplate");//既可以是字符串也可以是脚本标记，B是字符串 var html = xxxTemplate.render(data); /*B、指定模板名称的方式编译*/ $.templates('xxx','<b>{{:name}}</b>'); $.templates({ 'yyy','<b>{{:name}}</b>', 'zzz','<b>{{:name}}</b>' })； 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数据遍历
//Template {{for #data}} <h3>{{:name}}</h3> <ul> {{for language}} <li> {{:#parent.parent.data.name}} is learning {{:title}}</li> {{/for}} </ul> {{/for}} //Data var studnets = [ { "name": "Mingjun Tang", "language": [{ "title": "English"},{ "title": "Franch"}] }, { "name": "Ming Tang", "language": [{ "title": "English"}] } ];
遍历时#data充当了students,同时#parent.parent.data.XXX可以用于向上迭代。注意这里的data并不是student中的属性额，因为#parent向上迭代后返回的是一个jsrender对象只有，#parent.data后才会返回数组内容。#parent在jsrender叫路径访问，但是我觉得这里叫向上迭代还要好些。
jsrender条件：
{{if fullprice}}
html markup
{{else halfprice}}
html markup
{{else}}
html markup
{{/if}}
| 表达式 | 举例 | 注释 |
| || | {{ :a || b }} | 或 |
| && | {{ :a && b }} | 且 |
| ! | {{ :!a }} | 非 |
| <= 和>=和 <和 > | {{ :a <= b }} | 比较 |
| === 和 !== | {{ :a === b }} | 等于和不等于 |
jsrender模板嵌套：
<script type="text/x-jsrender" id="studentTemplate"> {{for #data}} <h3>{{:name}}</h3> <ul> {{for language tmpl="#studentLanguageTemplate" /}} </ul> {{/for}} </script> <script type="text/x-jsrender" id="studentLanguageTemplate"> <li> {{:#parent.parent.data.name}} is learning {{:title}}</li> </script> //render $("#studentList").html($("#studentTemplate").render(studnets));
这样就可以避免无限的嵌套下去，只需要设置{{for}}的tmpl属性即可。这时，tmpl是一个脚本标记。如果studentLanguageTemplate已经被$.templates()编译，那么也可以这么写：
<script type="text/x-jsrender" id="studentTemplate"> {{for #data}} <h3>{{:name}}</h3> <ul> {{for language tmpl="studentLanguageTemplate" /}} </ul> {{/for}} </script> <script type="text/x-jsrender" id="studentLanguageTemplate"> <li> {{:#parent.parent.data.name}} is learning {{:title}}</li> </script> //render $.templates("studentLanguageTemplate", "#studentLanguageTemplate"); $("#studentList").html($("#studentTemplate").render(studnets));