Backbone分页简介

Author : lovecicy

先来看看model和collection的parse方法:

parse:model.parse(response, options)

每次通过fetch和save方法获取model数据从server返回时,parse方法会被调用。parse方法会收到一个原始的后台返回数据response,parse方法的返回值将被填入model。默认的实现仅返回原始的数据。

假设有这样一个model:

var person = Backbone.Model.extend({
    defaults:{
       name:'',   
       age:0
    }
});

server端返回的数据如果是

{name:'James',age:20}

则获取成功,但是如果返回

{person:{name:'James',age:20}}

则获取失败,也就是如果要获取server返回的除model以外的数据,使用默认的parse方法是不行的。
这时需要修改parse方法:

var person = Backbone.Model.extend({
    defaults:{
       name:'',   
       age:0
    },
    parse:function(res,opt){
        return res.persion;
    }
});

collection的parse方法与model的parse方法类似。

下面来说说Backbone是如何分页的:

有下面的collection:

var classmates= Backbone.Collection.extend(){
    model:person,
    url:'/classmates',
    totalPage:0,
    currentPage:0,
    pageSize:20,
    totalResult:0,
    orderBy:'',
    parse:function(res,opt){
        this.totalPage = res.totalPage;
        this.totalResult = res.totalResult;
        this.currentPage = res.currentPage;
        this.pageSize = res.pageSize;
        this.orderBy = res.orderBy;
        return res.results;
    }
};

分页实现的函数:

pagination:function(e){
    var start;
    e.preventDefault;
    switch($(e.target).attr('class')){
        case 'normalPage':
            start = $(e.target).html();
            break;
        case 'prevPage':
            start = this.collection.currentPage-1;
            if(start === 0){
                return false;
            }
            break;
        case 'nextPage':
            start = this.collection.currentPage+1;
            if(start > this.collection.totalPages){
                return false;
            }
            break;
        default:
            return false;
    }
    console.log(start);
    return this.collection.fetch({
        data:{
            start: start
        }
    });
}

在fetch时带上分页信息,就可以请求到不同的页面,这样就可以进行分页了。

standard

Have your say