spajs
单页应用MVC框架
依赖zepto和artTemplate,已经将zepto和artTemplate编译进项目中.
下载和使用
下载
npm install --save-dev spajs.js
使用
<script src="dist/spajs.min.js"></script>
使用手册
Model-和数据相关的都放这里
model负责数据处理,所有和数据相关的业务逻辑都放在这里,model关心的几个要点:
- 数据怎么获取
- 请求参数的校验
- 对数据的拦截处理
- 数据获取后的回调
创建一个典型的ajax的model
var mainModel = SPA.model.create({
server: "http://host:port/remoting/main"
});
上面是创建一个典型的利用ajax获取服务器端数据的model,数据接口地址http://host:port/remoting/main
model的继承
var parentModel = SPA.model.create({
server: "http://host:port/remoting"
});
var demoModel = SPA.model.create({
tagName: "demo"
}, parentModel);
- parentModel是指定一个sever为http://host:port/remoting的基类
- demoModel继承parentModel,demoModel最终会访问http://host:port/remoting/demo接口
简单model
menuModel = SPA.model.create({
getData:function() {
return {
menu1:"菜单1"
,menu2:"菜单2"
}
}
}, SPA.model.simpleModel);
如果model的数据不是通过ajax获得,而是来自本地的一些数据,可以继承自SPA.model.simpleModel,重写getData方法,返回需要的数据。
数据校验
loginModel = SPA.model.create({
server:"http://host:port/remoting/login"
,validate:{
email:{
email:{
message:"必须是邮箱"
}
}
,password:{
minLength:{
params:[6]
,message:"长度不能小于6"
}
,maxLength:{
params:[12]
,message:"长度不能大于12"
}
}
}
});
loginModel.request({
email:"test@test.com"
,password:"123456"
}, function(error) {
if(error.email) {
console.error(error.email);
} else if(error.password) {
console.error(error.password);
}
})
上面对登录的邮箱和密码输入进行校验,目前内置的校验规则有:
- notEmpty
- isNumber
- min
- max
- minLength
- maxLength
数据获取后的回调
spa框架对数据获取后的回调是基于过滤器的设计
data->filter1(callback)->filter2(callback)……
loginInterceptor = SPAinterceptor;
上面是创建一个过滤器,data为返回的数据,views为需要通知的视图。返回true会传递到下一个过滤器,返回false则不再传递
spainterceptorviewsInterceptor = spainterceptor;
上面是spa框架内置的视图回调过滤器,默认情况都会调用该过滤器。该过滤器会将数据通知各个视图进行显示。
baseModel = SPAmodel;
上面在定义model时加入了2个过滤器
View-和界面相关的都放这里
view负责界面的渲染,目前采用artTemplate作为模板语言,view关心的几个要点:
- 模板语言artTemplate
- 视图定义
- 视图渲染方法render(data)
- 数据加载中渲染方法loading()
- 数据获取错误渲染方法error(model)
- 事件处理
模板语言artTemplate
- 本地模板定义:本地模板定义在页面中,如下:
2.远程模板定义:模板可以按需从远程下载
视图定义
1.本地视图定义 页面中加入: 定义视图对象: ajh.bookView = SPA.view.create({ templateId:"book" }); 2.远程视图定义 将模板内容放入template文件下,book.html ajh.bookView = SPA.view.create({ template:"template/book.html" });
view和model的结合使用
model1.notifyView({parametes}, [view1, view2])
model1.callback({parameters}, function(data){
}, function(error){
});
Examples
http://cs.i139.cn/aijuhui/aijuhui/dist/index.html
Contributing
memory.hu
License
Copyright (c) 2014 huchengyi
Licensed under the MIT license.