spajs

单页应用MVC框架

依赖zepto和artTemplate，已经将zepto和artTemplate编译进项目中.

下载和使用

下载

npm install --save-dev spajs.js

使用

<script src="dist/spajs.min.js"></script>

使用手册

Model-和数据相关的都放这里

model负责数据处理，所有和数据相关的业务逻辑都放在这里，model关心的几个要点:

1. 数据怎么获取
2. 请求参数的校验
3. 对数据的拦截处理
4. 数据获取后的回调

创建一个典型的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);

1. parentModel是指定一个sever为http://host:port/remoting的基类
2. 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);
    }
})

上面对登录的邮箱和密码输入进行校验，目前内置的校验规则有：

1. notEmpty
2. isNumber
3. min
4. max
5. minLength
6. maxLength
7. email

数据获取后的回调

spa框架对数据获取后的回调是基于过滤器的设计

data->filter1(callback)->filter2(callback)……

 
    loginInterceptor = SPA.interceptor.create({
        process:function(data, views) {
            return true;
        }
    });

上面是创建一个过滤器，data为返回的数据，views为需要通知的视图。返回true会传递到下一个过滤器，返回false则不再传递

 
    spa.interceptor.viewsInterceptor = spa.interceptor.create({
        process:function(data, views) {
            for(var i in views) {
                views[i].show(data);
            }
            return true;
        }
    });

上面是spa框架内置的视图回调过滤器，默认情况都会调用该过滤器。该过滤器会将数据通知各个视图进行显示。

 
    baseModel = SPA.model.create({
        server:"remoting"
        ,interceptors:[loginInterceptor, SPA.interceptor.viewsInterceptor]
    });

上面在定义model时加入了2个过滤器

View-和界面相关的都放这里

view负责界面的渲染，目前采用artTemplate作为模板语言，view关心的几个要点：

1. 模板语言artTemplate
2. 视图定义
3. 视图渲染方法render(data)
4. 数据加载中渲染方法loading()
5. 数据获取错误渲染方法error(model)
6. 事件处理

模板语言artTemplate

1. 本地模板定义：本地模板定义在页面中，如下：

    <script id="book" type="text/html">
    <ul class="list">
        <%for(i = 0; i < list.length; i ++) {%>
        <li id="<%=i%>" class="book"><%=list[i]%></li>
        <%}%>
    </ul>
    </script> 

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.