sls-route-tpl使用说明
此路由采用UMD模式编写,所以不用多说,肯定是兼容node。
使用npm方式安装:npm install sls-route-tpl
演示地址:http://demo.sailengsi.com/sls-route-tpl/release/
github地址:https://github.com/sailengsi/sls-route-tpl
代码第一更新地址:http://gitlab.zhangdonna.com/commons/sls-route-tpl
本项目采用fis编写,项目结构:
- dev #开发源码
- release #fis编译代码
因为demo代码比较多,这里只简单介绍一下关键点:
//home页面路由
var home = {
id: "home",
name: "home",
beforeFn: function(def) {
console.log("home before");
var self = this;
reqData("../data/home.json", function(data) {
self.data = JSON.parse(data);
def.resolve();
}, function() {
def.reject();
});
return def.promise;
},
data: {
data: {
content: "这是首页默认值"
}
},
fn: callBack
};
//list页面....
SlsRoute.config({
temp: ejs,
render: "render",
container: document.getElementById("page-container")
}).init([home], function() {
window.location.href = "#home";
});
通过上面代码可以看出,使用此功能,仅需要两部即可,先配置config,再通过init注册路由,下面解释一下上面代码的意思
-
config方法接收一个对象参数
- temp//[Object]模板对象,比如ejs,或者其他模板对象(必须)
- render//[String]模板对象的渲染方法,比如ejs用的是render,就传入render(必须)
-
init方法接收两个参数,一个是路由数组,一个是匹配不到路由时的回调函数
-第一个参数是数组,数组中的每个元素是对象,对象中有如下属性
- id: "home",//script方式定义模板的标签id(必须)
- url:"./tpls/home.html",//模板路径(必须)
- name: "home",//路由名称(必须)
- beforeFn: function(def) {},//获取模板成功之后,把数据渲染到模板之前的回调,上下文指向当前路由对象
- data: {},//默认数据(必须)
- fn: function(){}//数据渲染到模板并插入dom之后的回调,上下文指向当前路由对象
config方法比较简单,需要注意的是注册的路由对象的参数,以上六个参数,实际上只有四个是必须的,然而,id和url只能有一个,如果两个都传,默认采用id的方式加载模板
特别注意的是beforeFn回调,通过demo代码可以看出,在beforeFn回调中,给你返回了一个参数def,此参数是defrered对象,并且回调函数最后return了一个def.promise,了解过promise的应该就知道怎么回事了。
这里我解释一下:beforeFn回调,看名字就能看出是渲染数据之前回调,但是如果这个回调里面用了ajax,那么有可能在ajax还没执行成功的时候,就已经进行数据渲染,这样的话,这个回调就起不到效果了,所以通过promise技术,可以让这个回调执行完毕之后,并且通过返回的结果判断是否成功,是否需要渲染数据。
所以呢,如果你使用了before回调,请一定要在回调结束返回def.promise。在return之前,def还有两个方法,分别是def.resolve()和def.reject(),resolve是执行成功的时候调用,reject是失败的时候调用。
当在beforeFn回调中,遇到了reject时,程序将不会再往下执行(渲染模板数据等不再执行了),比如ajax请求失败了,在失败的时候可以给用户提示错误消息,然后调用此方法;如果遇到错误你依然想程序往下执行,你可以再成功和失败里都调用resolve即可。
此项目是sls-route的升级版,这一次增加了模板引擎功能,使用方法和第一版也略有不同,具体请查看demo。