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也是封装的这个框架，所有有问题的时候，多到这个地方参悟，自然就解决了。