带父参数的durandal子路由器

Question

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

我试图配置URL是：

#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

我会保持它的简单，并开始与一些静态路由在顶层

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; 
}); 

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

Answer 2

我遇到了这个问题，寻找相同的答案。我确实设法使用我的参数化路线正常工作。我的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 

啪路线：

{ 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; 
}); 

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

希望帮助的人同样的问题