jquery.tmpl.js 是一个模板js ,主要有2个方法
(1):$.template()方法&＃xff0c;将一段script或者是Html编译为模板,例如 $.template(&＃39;myTemplate&＃39;, markup); 后者的markup一般是一段script脚本包围的变量名&＃xff0c;或者是js里面的变量名&＃xff0c;而前者的myTemplate则是指&＃xff0c;我将markup编译为一个模板缓存&＃xff0c;模板名称为myTemplate&＃xff0c;如果我以后有需要在其他地方调用&＃xff0c;则只用拿 myTemplate 即可&＃xff0c;因为他已经在js的缓存里面了
(2):$(&＃39;#myTemplate ).tmpl(userLangs).appendTo(&＃39;#eachList&＃39;);
//模板 绑定 Json数据 添加到 指定的div或者是容器里面
一&＃xff1a;基本使用方法演示 分4个步骤&＃xff1a;(1)引入jquery和tmpl脚本 (2)开始写需要填充的模板和变量 (3)数据准备(4) 绑定模板
然后我们在html页面里面&＃xff0c;给一个容器&＃xff0c;用于显示数据绑定之后添加到什么容器上&＃xff0c;可以是div也可以是其他的&＃xff0c;例如这里是ul
1: <ul id&＃61;"eachList">
2:
3: ul> 4:
显示结果
生成的html代码
二&＃xff1a;高级一点的运用
Ajax获取Json数据&＃xff0c;并绑定,并且我们的模板&＃xff0c;第一个 采用 script 包围的方式&＃xff0c;第二个则直接采用 js变量
$(function () {$.ajax({type: "post",url: "handler/xxHandler.ashx",data: { classid: "12000001989", type: "getclassinfo" },dataType: "json",success: populate //如果ajax成功&＃xff0c;则执行这个操作});function populate(data) {// 把模板标记&＃xff0c;编译成[模板缓存]&＃xff0c;起个名字叫 eachTemplate,方便我们以后在其他地方调用$.template("eachTemplate", each);//把缓存 加入 数据&＃xff0c;然后添加到容器里面$.tmpl("eachTemplate", data).appendTo("#eachList");// 同一个数据&＃xff0c;也能第二次利用$.template("hwTemplate", HomeWorkSendTemplate);//把缓存 加入 数据&＃xff0c;然后添加到容器里面$.tmpl("hwTemplate", data).appendTo("#hwList");};});
后台 handler 获取参数&＃xff0c;并且返回 序列化的 json 给前台脚本
模板方式一&＃xff1a;使用script脚本包围的方式&＃xff0c;注意&＃xff0c;一定要加上一个 type&＃61;"text/x-jquery-tmpl"
模板方式二&＃xff0c;采用外部链接 js 脚本的方式&＃xff0c;这种方式 不用自己在后面写 type&＃61;"text/x-jquery-tmpl"
/* 模板二 直接在 其他的例如 mytemplate.js 里面写变量 即可 注意&＃xff0c;要在自己的页面里面进行脚本引入 */
var HomeWorkSendTemplate &＃61; &＃39;
HomeWorkSendTemplate &＃43;&＃61; &＃39;
HomeWorkSendTemplate &＃43;&＃61; &＃39;
HomeWorkSendTemplate &＃43;&＃61; &＃39;
三&＃xff1a;使用复杂的json格式展示数据
(1):准备好模板&＃xff0c;这里我们是使用一个表格来展示&＃xff0c;所以模板是用的tr来显示每一行的数据
(2):准备数据&＃xff0c;以及当文档加载完毕之后&＃xff0c;执行绑定
//这里一定要加上&＃xff0c;是在文档载入完成之后&＃xff0c;才执行绑定模板的$(function () {var demodata &＃61; [{"Cid": "1","Cname": "三年二班","Check": "0 0表示1个都没有勾选 1表示至少勾选了1个 2表示全部勾选","Cphoto": "班级图片地址","Students": [{"Sid": "s1","Sname": "周杰伦","Sphoto": "", //这里可能没有图片&＃xff0c;那么我们显示的时候&＃xff0c;还要判断是否显示默认图片"Check": "0表示没有勾选 1表示已经勾选"},{"Sid": "s2","Sname": "李宇春","Sphoto": "http://pic.cnitblog.com/face/582230/20131114141342.png","Check": "0表示没有勾选 1表示已经勾选"}]}, {"Cid": "1","Cname": "三年四","Check": "0 0表示1个都没有勾选 1表示至少勾选了1个 2表示全部勾选","Cphoto": "班级图片地址","Students": [{"Sid": "s3","Sname": "周笔畅","Sphoto": "http://pic.cnitblog.com/face/572602/20131112163110.png","Check": "0表示没有勾选 1表示已经勾选"},{"Sid": "s4","Sname": "董瑞","Sphoto": "http://pic.cnitblog.com/face/u119077.jpg","Check": "0表示没有勾选 1表示已经勾选"}]}];//编译模板classMuban为一个变量名-> nameClassMuban 这样以后在其他地方&＃xff0c;就可以方便调用 nameClassMuban了$.template("nameClassMuban", window.classMuban);//把模板缓存 加入 数据&＃xff0c;然后添加到容器里面$.tmpl("nameClassMuban", demodata).appendTo("#showMyJson"); });
(3):容器&＃xff0c;这里为了显示方便&＃xff0c;我们就用一个表格&＃xff0c;并且第一行&＃xff0c;我们自己已经给了。如果是实际项目中&＃xff0c;一般都是DIV做容器
| 班级Id | 班级名称 | 班级学生 |
最后我们来看看效果如何
代码生成如下
京公网安备 11010802041100号