Question

我正在尝试初始化子路由器，以便为我的应用程序的客户部分构建子导航。

我尝试配置的网址是：

#customer/1/orders/1

我在shell.js

中定义了一条到达客户视图的路线

define(['plugins/router', 'durandal/app'], function (router, app) {
    return {
        router: router, 
        activate: function () {
            router.map([
                { route: 'customer/:id*splat', moduleId: 'customer/customer' }
            ]).buildNavigationModel();

            return router.activate();
        }
    };
});

我创建了一个客户视图，其中包含客户部分的子导航。导航将使用路线中的客户ID。除了显示客户子导航外，此视图不会执行任何操作。我在这个视图中创建了一个子路由器。

define(['plugins/router', 'knockout'], function (router, ko) {
    var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId: 'customer',
            fromParent: true
        }).map([
            { route: 'orders/:orderId', moduleId: 'orders' }
        ]).buildNavigationModel();

    var activate = function(id) {

    };

    return {
        router: childRouter,
        activate: activate
    };
});

我的问题是，当我的父路由器中有参数时，我似乎无法使路由工作。客户视图被路由到但订单视图却没有。我最终会在客户部分下面有更多子视图。

Answer 1

我遇到了这个问题寻找相同的答案。我确实设法让我的参数化路线工作得很好。我的childRouter是第二级，我也使用{pushState：true}所以在我的哈希中没有#（哈希）:)所以如果你没有使用pushState，你需要添加一些。它看起来像这样：

文件夹结构如下所示：

app
 |
 |--users
     |
     |--profile
     |    |
     |    |--activity.html
     |    |--activity.js
     |    |--articles.html
     |    |--articles.js
     |    |--tags.html
     |    |--tags.js
     |
     |--index.html
     |--indexjs
     |--profile.html
     |--profile.js

顶级路由器中的Splat路由：

{ route: 'users/:userId/:slug*details', title: 'User',      moduleId: 'users/profile',      nav: false }

profile.js如下所示：

define(['plugins/router', 'plugins/http', 'durandal/app', 'jquery', 'knockout', 'timeago', 'bootstrap'], function (router, http, app, $, ko) {
    var childRouter = router.createChildRouter();

    var userProfile = function(user) {
        $.extend(this, user);
    };

    var userProfileViewModel = function () {
        var self = this;
        self.userProfile = ko.observable();
        self.router = childRouter;
        self.activate = function () {
            var userId = router.activeInstruction().params[0];
            var slug = router.activeInstruction().params[1];
            var userRoute = '/users/' + userId + '/' + slug;
            self.router.reset();
            self.router
                .makeRelative({
                    moduleId: 'users/profile',
                    route: 'users/:userId/:slug'
                })
                .map([
                { route: '', moduleId: 'articles', title: 'articles', nav: false, hash: userRoute + '/articles' },
                { route: 'articles', moduleId: 'articles', title: 'articles', nav: true, hash: userRoute + '/articles' },
                { route: 'tags', moduleId: 'tags', title: 'tags', nav: true, hash: userRoute + '/tags' },
                { route: 'activity', moduleId: 'activity', title: 'activity', nav: true, hash: userRoute + '/activity' }
                ]).buildNavigationModel();
            return self.loadUserProfile(userId);
        };
        self.loadUserProfile = function(userId) {
            var url = '/api/users/profile/' + userId;
            return http.jsonp(url).then(function(response) {
                self.userProfile(new userProfile(response));
            });
        };
    };
    return userProfileViewModel;
});

另请注意，我在这里返回一个构造函数，而不是一个对象，因为在我的情况下，我不想为此视图使用单例。

希望能帮助任何有同样问题的人

Answer 2

我会保持简单，并从顶层的一些静态路线开始

router.map([
    { route: 'customer/:id', moduleId: 'customer/customer' },
    { route: 'customer/:id/orders/:id', moduleId: 'customer/orders' },
    { route: 'customer/:id/xxx/:id', moduleId: 'customer/xxx' }
]).buildNavigationModel();

为了对每个客户（order，xxx等）进行完整的生命周期控制，实例返回一个构造函数而不是一个单例。

define(['knockout'], function (ko) {

    var ctor = function(){
       ...
    };

    //this runs on every instance
    ctor.prototype.activate = function(id) {  // or function(orderId, xxxID)

    };

    return ctor;
});

更多信息singleton vs constructor：http://durandaljs.com/documentation/Creating-A-Module.html

带有父参数的durandal子路由器

2 个答案: