Url не возвращается к базовому состоянию при переходе на какую-то страницу, а затем обратно

Question

У меня возникли проблемы с пониманием того, почему, когда в моем приложении Durandal, после того, как я перейду на страницу с подробной информацией, вернитесь к списку. Я получаю URL-адрес с URL-адрес страницы детали, встроенный в текущий URL-адрес.

Например:

Когда я начинаю я получил: http://localhost:51429/#/

Тогда я иду на странице детали: http://localhost:51429/physDetail

Тогда я вернуться на страницу списка: http://localhost:51429/physDetail#/physList

Почему я получаю «physDetail #», встроенный в URL-адрес? Проблема заключается в том, что если я ударил F5, чтобы обновить HTML я получаю 404.

Я устанавливаю маршруты, как это:

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 
    }]; 

Переключение на страницу сведений происходит при нажатии на строку в списке , список HTML выглядит следующим образом:

обработчик

<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> 

JS выглядит следующим образом:

function physClicked(phys, event) { 
    router.navigateTo("physDetail"); 
    return; 
} 

Возврат к списку (или другой странице), нажав на кнопку в верхней части страницы. Кнопка HTML выглядит так:

<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> 

Должен ли я отказаться от перехода на другую страницу? Должен ли я разрешать только кнопку «Назад» или делать router.navigateBack() после сохранения или отмены?

Я попытался найти руководство по этому вопросу на сайте Durandaljs, но либо он не существует, либо я не знаю, какой правильный вопрос задать.

Спасибо за понимание.

Answer 1

У меня все еще нет понимания того, почему «#physDetail» помещается в URL-адрес, но решил разрешить только вариант «goBack», используя router.navigateBack(), чтобы вернуться в исходный список врачей. Это обходит проблему и, вероятно, делает их более однородными.

Я сделал это, указав <div class="btn-group"...> идентификатор и выполнив «скрытие» jQuery в активации функции physDetail.js. Это предотвратит навигацию в другом списке.

Когда выполняется navigateBack(), URL-адрес является чистым и не содержит в нем «#physDetail».

Answer 2

Вы должны заглянуть в поворот вашего параметра url в маршрут. Это может быть то, что испортило создание вашего хэша URL. Также рекомендуется настроить маршрут по умолчанию. Это будет тот, который оценивает пустой хэш или вообще не имеет хеша. В Durandal 2.x объект маршрута может принимать массив, а не только строку. Вы можете установить первый элемент в массиве как пустую строку, чтобы обозначить, что это маршрут по умолчанию для вашего URL, если хеш не найден.

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 
}];