带参数的 durandal.js 导航答案

【问题标题】：durandal.js navigation with parameters带参数的 durandal.js 导航
【发布时间】：2013-08-05 09:14:12
【问题描述】：

我无法使用参数从一个视图导航到另一个视图

来自：-

ViewModel : App/Foldername/page1.js
View : App/Foldername/page1.html

我想用id参数去：

ViewModel : App/Foldername/page2.js
    View : App/Foldername/page2.html

在 page1.js 我写了以下内容，

self.goTopage2 = function (id) {
                            router.mapRoute('Foldername/page2/:id', 'viewmodels/Foldername/page2', 'This is page2view');
        };

在 shell.js

中

 function boot() {
            router.mapNav('home');
            router.mapNav('details');
            router.mapNav('Foldername/page2');              
            log('Hot Towel SPA Loaded!', null, true);
            return router.activate('home');
        }

请指导我正确的方法！

【问题讨论】：

你使用的是哪个版本的 durandal？

标签： javascript single-page-application durandal sammy.js

【解决方案1】：

一种常见的方法是在某处有一个路线列表并加载该列表。当您定义如下列表时，您需要使用 router.map() 来映射路由，因为 mapNav 创建一个没有参数的默认路由。包含路由的对象示例 -

var routes = [{
    url: 'home',
    moduleId: 'viewmodels/home',
    name: 'Home',
    visible: true,
    settings: {}
}, {
    url: 'events',
    moduleId: 'viewmodels/events/events',
    name: 'Events',
    visible: true,
    settings: {}
}, {
    url: 'eventdetails/:id',
    moduleId: 'viewmodels/events/eventdetails',
    name: 'Event Details',
    visible: false,
    settings: { event: true, show: false }
}];

以及如何绘制这些路线 -

router.map(routes);

最后如何访问这些路线 -

router.activate('home');

或

var url = '#/fighterdetails/' + selectedFighter.id();
router.navigateTo(url);

【讨论】：

【解决方案2】：

（DurandalJS 1.2.0）我不完全确定这是否是最好的方法，因为我对 Durandal 很陌生，但至少设法使它与此一起使用：

在 main.js 中：

router.mapRoute('details/:id', 'viewmodels/details', 'Details', false);

在 list.js 中：

loadDetails: function (id) {
    router.navigateTo('#/details/' + id);
},

【讨论】：