帶父參數的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; 
}); 

請注意，我在這裏返回一個構造函數，而不是一個對象，因爲在我的情況下，我不想爲此視圖創建一個單例。

希望幫助的人同樣的問題