Chapter: 6.页面和服务器通信代码的开发
title: 3.实现上下翻页功能的数据渲染
思路概述
上下翻页实际上也是要实现数据连接和数据渲染两个部分功能，而且由于之前已经实现了相关功能，所以实际上只需要对已有的方法进行二次封装。
具体来说，由于之前已经实现了获取章节标题和章节内容两个方法，所以翻页只需要
1. 实现上翻页prevChapter()和下翻页nextChapter()两个函数，每次触发对id进行-/+ 1并返回
2. 实现点击按钮时触发对应翻页函数
编写prevChapter()和nextChapter函数
-
变量调整
将原来在
main()函数里定义的readerModel和readerUI的定义位置改为整个闭包最外层里定义，方便后面使用，当然通过传参的方式也是可以实现的(没错肯定是因为讲师嫌麻烦偷懒)在
readerModel()函数里定义chapter_total变量，即为章节数在
getFictionInfo函数定义里添加chapter_total=data.chapters.length; 在
ReaderModel()函数里添加这两个函数
var prevChapter=function(UIcallback){
chapter_id=parseInt(chapter_id,10);
if(chapter_id==0){
return;
}
chapter_id-=1;
getCurrentChapterContent(chapter_id,UIcallback);
}
var nextChapter=function(UIcallback){
chapter_id=parseInt(chapter_id,10);
if(chapter_id==chapter_total){
return;
}
chapter_id+=1;
getCurrentChapterContent(chapter_id,UIcallback);
}
return{
init : init,//返回接口
prevChapter : prevChapter,
nextChapter : nextChapter
}
Note:此时意外发现6.1节6.1实现数据层里找不到init的bug是因为把getCurrentChapterContent()函数写进了getFictionInfo()里了，实际上这二者应该是平行的关系，把花括号的位置调一下就好了
编写上下翻页按钮pre_button和next_button的触发绑定
$('prev_button').click(function(){
readerModel.prevChapter(function(data){
readerUI(data));
});
$('next_button').click(function(){
readerModel.nextChapter(function(data){
readerUI(data);
});
});
