Durandal 1.2中是否可以使用參數映射路線導航？

Question

我使用迪朗達爾1.2，有一個導航欄是這樣的：

我要做到以下幾點：

• 下拉是客戶列表，並且用戶可以選擇 中的任意一個
• 如果沒有選擇任何一個，則第一個將被視爲默認值。
• 導航欄中的其他鏈接應該具有與客戶ID匹配的網址。
• The Details -page也應該是登陸頁面。

所以默認客戶，網址是：

• 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實際上並不支持從激活函數內重新導航。因此，您可能會考慮：

1. 允許沒有指定標識的路由，但不強制它重新導航到特定於標識的路由。
2. 在導航到詳細信息頁面之前獲取默認客戶ID。

假設選項1：

在激活功能，您可以檢查是否一個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％，但無論如何應該給你一些想法。