appcan用mvvm实现下拉刷新和上拉加载

关于MVVM的理论，网上说的已经比较多了，最近需要快速开发开发一个app，采用了appcan，用MVVM模式开发起来还是比较顺手的，学习周期大约一周，先开发了接口，然后开始app开发，对于scrollview的下拉刷新，官方是有例子的，比较容易实现，但是上拉加载和分页这些没有完整的例子啥的，会耽误点时间，我把代码粘出来，希望能帮一些同类节省点时间，话不多说，上代码：

appcan.ready(function() {        $.scrollbox($("body")).on("releaseToReload",        function() { //After Release or call reload function,we reset the bounce            $("#ScrollContent_5VO035").trigger("reload", this);        }).on("onReloading",        function(a) { //if onreloading status, drag will trigger this event        }).on("dragToReload",        function() { //drag over 30% of bounce height,will trigger this event        }).on("draging",        function(status) { //on draging, this event will be triggered.        }).on("release",        function() { //on draging, this event will be triggered.        }).on("scrollbottom",        function() { //on scroll bottom,this event will be triggered.you should get data from server            $("#ScrollContent_5VO035").trigger("more", this);//看这里，需要在这里添加上拉加载更多的事件触发        }).reload();                 })  

Services层面：

var Service_artist = new MVVM.Service({    pretreatment: function(data, option) {        return data;    },    dosuccess: function(data, option) {        closeLoading();        return data.data;    },    doerror: function(e, err, option) {        closeLoading();        appcan.window.openToast({                    msg:'请求数据出错',                    duration:3000,                    position:5,                    type:0        });            return err;    },    validate: function(data, option) {         if(data.code == 1000){            return 0;        }else{            return 1;        }       },    ajaxCall: function(data, option) {        var self = this;               appcan.request.ajax({            url:  '你的api接口地址',            type: "GET",            data: '',            dataType: "json",            contentType: "application/x-www-form-urlencoded",            success: function(data) {                var res = self.validate(data, option);                if (!res) option.success(self.dosuccess(data, option));                else option.error(self.doerror(data, res, option));            },            error: function(e, err) {                option.error(self.doerror(e, err, option));            }        });    }});

Model层面：

var Model_Collection_artist = MVVM.Model.extend({    defaults: {},    computeds: {},    sync: function(method, model, options) {        switch (method) {        case "create":            break;        case "update":            break;        case "patch":            break;        case "delete":            break;        default:            break;        }    }});

Collection层面：

var Collection_artist = new(MVVM.Collection.extend({    initialize: function() {        return;    },    parse: function(data) {        //console.log(data);        totalpage = data.totalpage; //接口返回的总页数        return data.writers_list;//这是个JSON的array，包含了构造model对象的JSON对象           },    model: Model_Collection_artist,    sync: function(method, collection, options) {        switch (method) {        case "read":            openLoading();            Service_artist.request(options.attrs, options);            break;        default:            break;        }    }}))();

ViewModel层面：

var ViewModel_artist = new(MVVM.ViewModel.extend({    el: "#ScrollContent_5VO035",        events: {        "reload": function(ev, param) {            totalpage = 0;            curpage = 1;            this.collection.fetch({                "success": function() {                    //debugger;                    param.reset();                },                "error": function() {                    //debugger;                    param.reset();                }            })        },        "more":function(ev,param){      //关键的代码就在这里            //alert(curpage+"======"+totalpage);                  if(curpage<totalpage){                curpage = curpage+1;                this.collection.fetch({remove: false});//加载更多时需要加这一句，不然数据会被覆盖，关键点就在这里                param.reset();//这个也比较关键，没有这个，会导致后面不执行加载            }              // this.collection.fetch({remove: false});            // param.reset();        },    },    initialize: function() {        return;    },    collection: Collection_artist,    itemEvents: {}}))();

最后揭露一下事实的真相：http://www.css88.com/doc/backbone/，appcan也是封装的这个框架，所有有问题的时候，多到这个地方参悟，自然就解决了。