具有父参数的 durandal 子路由器

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} 所以我的哈希中没有 #(hashes) :) 所以如果你不使用 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();

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

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

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

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

    };

    return ctor;
});

更多信息单例与构造函数：http://durandaljs.com/documentation/Creating-A-Module.html