导演路由顺序

时间:2017-07-10 03:42:23

标签: javascript

我使用导演来建立SPA。当我在浏览器中输入网址http://127.0.0.1:8020/spa/index.html#/customerInfo/CL00005/billing时,路由顺序为/customerInfo/:cumID/:infoType,/customerInfo/:cumID。单击页面上的链接时,路由顺序为/customerInfo/:cumID,/customerInfo/:cumID/:infoType。当我单击页面上的链接时,如何在浏览器中输入URL时,如何更改路由顺序。 router.js的代码:

define(['jquery', 'director'], function($, director) {
    this.router = new Router().configure({
        recurse: 'forward'
    });

    function resolveConfig(config, callback) {
        if(config['require'] && typeof config['require'] === 'string') {
            var resolvedConfig = {};
            require([config['require']], callback);

        } else {
            callback(config);
//          throw 'undefined config';
        }
    }

    function register(url, routeConfig) {
        router.on(url, function() {
            var paramsName = routeConfig.paramsName;
            var args = arguments;
            var argLen = args ? args.length : 0;
            var urlParamsLen = paramsName ? paramsName.length : 0;
            var loopLen = argLen < urlParamsLen ? argLen : urlParamsLen;
            var urlParams = {};
            for(var i = 0; i < loopLen; i++) {
                urlParams[paramsName[i]] = args[i];
            }
            var resolvedConfig = resolveConfig(routeConfig, function(loadedConfig) {
                console.log(url);
                console.log(routeConfig.name);
                loadedConfig.onRoute({name:routeConfig.name,urlParams:urlParams});
            });
        });
    }
    return {
        register: register,
        initRoute: function (){
                router.init('/home');
        }
    };
});

registeRoute.js的代码:

define(
    [
        "app/boot/router"
    ],
    function(router) {
        router.register('/home', {
            name: 'home',
            require: 'app/boot/contentViewModel'
        });
        router.register('/campaigns', {
            name: 'campaigns',
            require: 'app/boot/contentViewModel'
        });
        router.register('/promos', {
            name: 'promotions',
            require: 'app/boot/contentViewModel'
        });
        router.register('/help', {
            name: 'help',
            require: 'app/boot/contentViewModel'
        });
        router.register('/customerInfo/:cumID', {
            name: 'customerMain',
            paramsName: ['custNum','infoType'],
//          require: 'app/boot/contentViewModel'
            require: 'app/pages/customer/customerMainRoute'
        });
        router.register('/customerInfo/:cumID/:infoType',{
            name : 'billShipInfo',
            paramsName: ['custNum','infoType'],
            require: 'app/pages/customer/customerMain'
        });
        router.initRoute();


    });

startup.js的代码:

define(['jquery', 'knockout', './contentViewModel',  './registeRouter', 'app/appConfig'], function($, ko, contentViewModel) {
    ko.components.register(appConfig.components.nav.name, {
        require: appConfig.components.nav.template
    });
    ko.components.register(appConfig.components.header.name, {
        require: appConfig.components.header.template
    });
    ko.components.register(appConfig.components.empty.name, {
        require: appConfig.components.empty.template
    });
    ko.components.register(appConfig.components.customerContact.name, {
        require: appConfig.components.customerContact.template
    });
    ko.components.register(appConfig.components.customerHistory.name, {
        require: appConfig.components.customerHistory.template
    });
    ko.components.register(appConfig.pages.home.name, {
            require: appConfig.pages.home.template
    });
    ko.components.register(appConfig.pages.promotions.name, {
        require: appConfig.pages.promotions.template
    });
    ko.components.register(appConfig.pages.campaigns.name, {
        require: appConfig.pages.campaigns.template
    });
    ko.components.register(appConfig.pages.help.name, {
        require: appConfig.pages.help.template
    });
    ko.components.register(appConfig.pages.customerMain.name, {
        require: appConfig.pages.customerMain.template
    });
    ko.components.register(appConfig.components.billShipInfo.name, {
        require: appConfig.components.billShipInfo.template
    });

    ko.applyBindings(contentViewModel);
});

0 个答案:

没有答案