Chapter: 6.页面和服务器通信代码的开发

title: 3.实现上下翻页功能的数据渲染

思路概述

上下翻页实际上也是要实现数据连接和数据渲染两个部分功能，而且由于之前已经实现了相关功能，所以实际上只需要对已有的方法进行二次封装。

具体来说，由于之前已经实现了获取章节标题和章节内容两个方法，所以翻页只需要

​ 1. 实现上翻页prevChapter()和下翻页nextChapter()两个函数，每次触发对id进行-/+ 1并返回

​ 2. 实现点击按钮时触发对应翻页函数

编写prevChapter()和nextChapter函数

1. 变量调整

   将原来在main()函数里定义的readerModel和readerUI的定义位置改为整个闭包最外层里定义，方便后面使用，当然通过传参的方式也是可以实现的(没错肯定是因为讲师嫌麻烦偷懒)

   在readerModel()函数里定义chapter_total变量，即为章节数

   在getFictionInfo函数定义里添加chapter_total=data.chapters.length;

2. 在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);
    });
});