0

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

在此处输入图像描述

我想做以下事情：

  • 下拉列表是客户列表，用户可以选择其中任何一个
  • 如果没有选择，则第一个被视为默认值。
  • 导航栏中的其他链接应具有与客户 ID 匹配的 URL。
  • 详细信息页面也应该是登录页面。

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

  • 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无效。导航栏中缺少该链接。

4

1 回答 1

0

路由器上有一个navigateTo功能应该可以满足您的需求。

根据您的描述，我假设详细信息和订单在不同的页面上。

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

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

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

使用此映射，您应该能够导航到带有或不带有 id 的客户详细信息页面。

据我所知，Durandal 1.x 并不真正支持从激活函数中重新导航。因此，您可能会考虑：

  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%，但无论如何应该给你一些想法。

于 2013-10-11T11:53:44.207 回答