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:"[email protected]" ,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.本地视图定义 页面中加入： <%for(i = 0; i < list.length; i ++) {%> <%=list[i]%> <%}%> 定义视图对象： 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.