html代码
<!DOCTYPE html>
<html>
Handlebars
我的笔记本
你的指尖，有改变世界的力量
js代码： $(function(){ var GETCLASSES = "http://imoocnote.calfnote.com/inter/getClasses.php"; $.ajaxSetup({ error:function(){ alert('调用接口失败'); return false; } }); function renderTemplate(templateSelector,data,htmlSelector){ var t = $(templateSelector).html(); var f = Handlebars.compile(t); var h = f(data); $(htmlSelector).html(h); } $('.overlap').on('click',function(){ showNote(false); }) function bindClassEvent(){ $('#classes').delegate('li','click',function(){ showNote(true); }) } bindClassEvent(); function showNote(show){ if(show){ $(".overlap").css('display','block'); $(".notedetail").css('display','block'); }else{ $(".overlap").css('display','none'); $(".notedetail").css('display','none'); } } function refreshClasses(curPage){ $.getJSON(GETCLASSES,{curPage:curPage},function(data){ //***注意单词大小写问题 curPage renderTemplate('#class-template',data.data,"#classes"); renderTemplate('#pag-template',formatPag(data),"#pag"); }); } //事件委托 function bindPageEvent(){ $('#pag').delegate('li.clickable','click',function(){ $this = $(this); console.log($this.data('id')) //*******注意data-id refreshClasses($this.data('id')); }) } bindPageEvent(); $.getJSON(GETCLASSES,{curPage:1},function(data){ //***注意单词大小写问题 curPage // console.log(data); console.log(data.data); renderTemplate('#class-template',data.data,"#classes"); renderTemplate('#pag-template',formatPag(data),"#pag"); }); Handlebars.registerHelper("equel",function(v1,v2,option){ if(v1 == v2){ return option.fn(this); }else{ return option.inverse(this); } }); Handlebars.registerHelper("long",function(v,option){ if(v.indexOf('小时') != -1){ return option.fn(this); }else{ return option.inverse(this); } }); // 分页函数 需要后台做分页 function formatPag(pagData){ var arr = []; var total = parseInt(pagData.totalCount); //总页数 var cur = parseInt(pagData.curPage); //当前页 // 处理到首页的逻辑******** var toLeft = {}; //对象，跳转到首页 toLeft.index = 1; //index代表跳转的页面 toLeft.text = "«"; if(cur !=1){ toLeft.clickable = true; } arr.push(toLeft); //处理到上一页的逻辑******** var pre = {}; //跳转到上一页 pre.index = cur -1; pre.text = '‹'; if(cur !=1){ pre.clickable = true; } arr.push(pre); //处理到cur页前的逻辑*******当前页面之前的几个页码按钮 if(cur <=5){ //如果cur<=5，就把前页面之前的页码全显示出来 for(var i=1;i
5，那么cur前的页要显示... //也就是说，例如当前页面是在第7页，就在1的后面显示...,例如：1 ... 5 6 7 var pag = {}; pag.text = 1; pag.index = 1; pag.clickable = true; arr.push(pag); var pag = {}; pag.text = '...'; arr.push(pag); for(var i=cur-2;i
= total-4){ for(var i=cur+1;i<=total;i++){ var pag = {}; pag.text = i; pag.index = i; pag.clickable = true; arr.push(pag); } }else{ //如果cur