问题描述:

I'm having trouble understanding why, when in my Durandal app, after I go to a detail page then back to a list I get a url with the detail page's url embedded in the current URL.

For example:

When I start out I've got: http://localhost:51429/#/

Then I go to the detail page: http://localhost:51429/physDetail

Then I go back to the list page: http://localhost:51429/physDetail#/physList

Why am I getting 'physDetail#' embedded in the url? The problem is that if I hit F5 to refresh the html I get a 404.

I'm setting routes like this:

 var routes = [{

url: 'physList',

moduleId: 'viewmodels/physList',

name: 'Physicians',

visible: true

}, {

url: 'physDetail',

moduleId: 'viewmodels/physDetail',

name: 'View Physician Detail',

visible: false

}, {

url: 'incentives',

moduleId: 'viewmodels/incentiveList',

name: 'Incentives',

visible: true

}, {

url: 'membershipList',

moduleId: 'viewmodels/membershipList',

name: 'Membership',

visible: true

}];

Switching to the detail page occurs by clicking on a row in the list.

The list HTML looks like this:

 <tbody data-bind="foreach: $root.physicians, delegatedHandler: 'click'">

<tr data-click="physClicked">

<td data-bind="text: contact_LastName"></td>

<td data-bind="text: contact_FirstName"></td>

<td data-bind="foreach: contact_Phones">

<span data-bind="phoneFormat: fullPhone"></span>

</td>

<td data-bind="foreach: contact_Emails">

<span data-bind="emailFormat: address"></span>

</td>

</tr>

</tbody>

The js handler looks like this:

function physClicked(phys, event) {

router.navigateTo("physDetail");

return;

}

Return to the list (or another page) by clicking on a button at the top of the page. The button HTML looks like this:

<div class="btn-group" data-bind="foreach: router.visibleRoutes">

<a data-bind="css: { active: isActive }, attr: { href: hash }, text: name"

class="btn btn-info" href="#"></a>

</div>

Should I be dis-allowing a jump to another page? Should I only allow a back button or doing a router.navigateBack() after a save or cancel?

I've tried to find some guidance on this at the Durandaljs site but either it doesn't exist or I don't know the right question to ask.

Thanks for any insight.

网友答案:

You should look into turning your url parameter into a route. This might be the thing that's messing up the creation of your url hash. Also it's a good idea to setup your default route. This will be the one that evaluates to an empty hash or no hash at all. In Durandal 2.x the route object can accept an array instead of just a string. You can set the first item in the array as an empty string to denote that this is the default route for your url if no hash is found.

var routes = [{
  route: ['', physList'],
  moduleId: 'viewmodels/physList',
  name: 'Physicians',
  visible: true
}, {
  route: 'physDetail',
  moduleId: 'viewmodels/physDetail',
  name: 'View Physician Detail',
  visible: false
}, {
  route: 'incentives',
  moduleId: 'viewmodels/incentiveList',
  name: 'Incentives',
  visible: true
}, {
  route: 'membershipList',
  moduleId: 'viewmodels/membershipList',
  name: 'Membership',
  visible: true
}];
网友答案:

I still don't have an understanding of why the "#physDetail" is interposed in the URL but decided to only allow a 'goBack' option using router.navigateBack() to get back to the original physician list. This circumvents the problem and probably makes the ux more uniform.

I did this by giving the <div class="btn-group"...> an id and doing a jQuery 'hide' in the activate of the physDetail.js. That'll prevent navigation to a different list.

When the navigateBack() is executed the URL is clean and doesn't have the '#physDetail' in it.

相关阅读:
Top