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注册路由，下面解释一下上面代码的意思

1. config方法接收一个对象参数

   • temp//[Object]模板对象，比如ejs，或者其他模板对象（必须）
   • render//[String]模板对象的渲染方法，比如ejs用的是render，就传入render（必须）

2. 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。