在Durandal 1.2中是否可以使用参数映射路线导航？

Question

我正在使用Durandal 1.2，并且有一个这样的导航栏：

我想做以下事情：

• 下拉列表是客户列表，用户可以选择任何一个 他们
• 如果未选择任何一个，则第一个被视为默认值。
• 导航栏中的其他链接应包含与客户ID匹配的网址。
• 详细信息页面也应该是着陆页。

因此对于默认客户，网址为：

• company/1/details
• company/1/orders

选择其他客户

• company/2/details
• company/2/orders

这是我无法弄清楚如何做的事情：

1. 用户第一次登陆时，我不知道客户ID和 没有导航要映射。那我想做的就是选择 默认客户，映射导航并导航到登录页面 （customer/1/details）。
2. 现在应使用默认客户ID映射导航。
3. 当用户选择其他客户时，导航应该是 使用所选客户ID重新映射，但用户应不 被导航离开当前页面。所以如果用户访问过 客户＃1的订单页面，然后选择客户＃2，他应该看到 客户＃2的订单页面。

更新 我尝试在router.handleInvalidRoute中映射和重定向：

router.handleInvalidRoute = function(route, params) {
    router.mapNav("customer/1/details", "viewmodels/details", "details");
    router.navigateTo("#/customer/1/details");
};

重定向有效，但mapNav没有。导航栏中缺少链接。

Answer 1

路由器上有一个navigateTo功能，可以执行您想要的功能。

根据您的描述判断，我假设细节和订单位于不同的页面上。

在Durandal中，您通常会有页面（视图模型）名称，后跟参数。因此，对于这个答案，我将假设客户详细信息和客户订单的页面名称，每个都有一个id参数。

在这种情况下，您需要一个处理如下参数的路径设置：

router.mapNav("customer-details/:id");
router.mapNav("customer-details");
router.mapNav("customer-orders/:id");

通过此映射，您应该能够导航到包含或不包含id的客户详细信息页面。

据我所知，Durandal 1.x实际上并不支持在activate函数中重新导航。因此，您可以考虑：

1. 允许未指定ID的路由，但不强制它重新导航到特定于ID的路由。
2. 在导航到详细信息页面之前获取默认客户ID。

假设选项1：

在activate函数中，您可以检查是否传递了id：

function activate(context){
    //load the customer dropdown source
    ...

    if( !context.hasOwnProperty("id") ){
        //id was not supplied, so set the current customer id 
        //  to the first one in the customer dropdown source
        ...
    }
}

<小时/> 至于导航栏，设置导航链接可能最简单，因此它们是通用的。您可以将链接的单击绑定到视图模型中的函数，然后以编程方式从那里导航。这样你就可以应用任何必要的逻辑。

视图

//in the view
<select data-bind='options: customers, value: selectedCustomer'></select>

<a data-bind='click: showDetails'>Details</a>
| <a data-bind='click: showOrders'>Orders</a>

查看模型

//in the view model  
//   (these members need to be expose publically so knockout can access them)

var customers = ko.observableArray();
var selectedCustomer = ko.observable();

function showDetails(){
    if( this.selectedCustomer() ){
        var id = this.selectedCustomer().id;
        router.navigateTo("#/customer-details/" + id);
    }
}; 
function showOrders(){
    if( this.selectedCustomer() ){
        var id = this.selectedCustomer().id;
        router.navigateTo("#/customer-orders/" + id);
    }
};

希望这有帮助 - 它不是100％，但无论如何应该给你一些想法。