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。