Jquery模板-----JsRender
重新排版与堂堂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 = ; 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 = ; 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));
Jquery模板-----JsRender的更多相关文章
- 下一代Jquery模板-----JsRender
在ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender中提到了JsRender.JsRedner和JsViews(JsViews是再JsRender基础 ...
- jQuery模板插件jsrender
前几天学习jqm+phonegap,用到了一个jquery插件jsrender,(由于app不能用asp.net的服务端控件了,所以我也是醉了...),用于循环展示一下数据. 下面是我用到的几个简单用 ...
- 10 个强大的JavaScript / jQuery 模板引擎推荐
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...
- jquery模板下载网站
jquery模板下载网站 http://www.jqshare.com/
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- jQuery 模板插件jquery-tmpl
Step1:导入脚本: <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")">&l ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- javascript/jquery模板引擎——Handlebars初体验
Handlebars.js下载地址:http://handlebarsjs.com/ 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分.其中有项功能是需要ajax调用后端接口,返回 ...
- JQuery模板插件-jquery.tmpl
转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...
随机推荐
- Coach Said No Worry
I have been losing memories those days. I can't get through what I was doing right then. I have prom ...
- Spring Boot 揭秘与实战（七） 实用技术篇 - Java Mail 发送邮件
文章目录 1. Spring Boot 集成 Java Mail 2. 单元测试 3. 源代码 Spring 对 Java Mail 有很好的支持.因此,Spring Boot 也提供了自动配置的支持 ...
- 第四十二课 KMP算法的应用
思考: replace图解: 程序完善: DTString.h: #ifndef DTSTRING_H #define DTSTRING_H #include "Object.h" ...
- ubuntu: firefox+flashplay
更新两步: 1.安装firefox:rm-->下载-->mv-->ln http://www.cnblogs.com/yzsatcnblogs/p/4266985.html 2. f ...
- DG备库，实时应用如何判断，MR进程，及MRP应用归档，三种情况的查询及验证
本篇文档学习,DG备库,实时应用如何判断,MR进程,及MRP应用归档,三种情况的查询及验证 1.取消MRP进程 备库查询进程状态select process,client_process,sequen ...
- 改变html中的内容
$("#id").html() 获取内容 $("#id").html(xiugai) 修改内容
- 第一个程序HelloWorld及常见问题解决和练习
public class hello world{ public static void main(String[] args){ System.out.println(); } } 注意事项: 源文 ...
- AangularJS入门总结一
CRUD(增加Create.查询Retrieve.更新Update.删除Delete) 一.angularjs是为了克服HTML在构建应用上的不足而设计的: 二.AngularJS的出众之处: 构建一 ...
- day18-19 Storm
课程介绍 课程名称:Storm是什么 课程目标: 通过该课程的学习能够了解离线计算与流式计算的区别.掌握Storm框架的基础知识.了解流式计算的一般架构图. 课程大纲: 1. 离线计算是什么? 2. ...
- this关键字的使用8/22
实质就是:this代表当前对象目录: 1.this(name) 调用同一个类中参数为 public Person(String name)这个构造方法 2.this.say() 同一个类中,某一个方法 ...