带有参数

Question

再一次Durandal问题^^我想制作一个子导航菜单。 每个网址调用子网页

<a class="btn btn-primary" data-bind="attr: { href: '#customer/'+ id }">Open</a>

shell.js将此路由到您在此处可以看到的 customers / shell2.js （子路由器）：

define(['plugins/router', 'knockout', 'utility', 'logger', 'datacontext'], function (router, ko, utility, logger, datacontext) {
var displayName = 'Customer';
var cId = ko.observable(0);

var childRouter = router.createChildRouter()
    .makeRelative({ moduleId: 'viewmodels/customers' , route: 'customer/:id/'});

return {
    router: childRouter,
    cId: cId,
    displayName: displayName,
    activate: activate
};

function activate() {
    cId(parseInt(router.activeInstruction().params[0]));
    childRouter.map([
        {
            route: ['', 'overview'],
            moduleId: 'overview',
            name: 'Overview',
            hash: '#customer/' + cId() + '/overview',
            nav: false,
            settings: {}
        },
        {
            route: 'sessions',
            moduleId: 'sessions',
            name: 'Sitzungen',
            hash: '#customer/' + cId() + '/sessions',
            nav: false,
            settings: {}
        }
    ]).buildNavigationModel();
}
});

简而言之：我希望链接类似于#customer / 17 / overview，其中17是调用子导航的路由参数。

当我调用url＃customer / 17时，会显示路线的内容，但不显示子导航。此外，网址#customer / 17 / overview和#customer / 17 / session不能正常工作...... 有人是一个工作示例，其中subnav使用参数构建？

编辑： 的 shell.js

define(['plugins/router', 'knockout' ,'session', 'toastr','logger', 'durandal/app']
, function (router, ko, session, toastr, logger, app) {

var routes= [
    {   route: '',
        moduleId: 'login',
        name: 'Login',
        hash: '',
        nav: false,
        settings: {}
    },
    {   route: 'dashboard',
        moduleId: 'dashboard/dashboard',
        name: 'Dashboard',
        hash: '#dashboard',
        nav: true,
        settings: {}
    },
    {   route: 'customers',
        moduleId: 'customers/customers',
        name: 'Customers',
        hash: '#customers',
        nav: true,
        settings: {}
    },
    {   route: 'customer/:id',
        moduleId: 'customers/shell2',
        name: 'customer',
        hash: '',
        nav: false,
        settings: {}
    },
    {   route: 'logout',
        moduleId: 'logout',
        name: 'Logout',
        hash: '',
        nav: true,
        settings: {}
    }];

return {
    activate: activate,
    router: router,
    session: session,
    app: app
};

function activate() {
    router.makeRelative({moduleId:'viewmodels'})
        .map(routes)
        .buildNavigationModel() // Finds all nav routes and makes them ready
        .mapUnknownRoutes('notfound', 'notfound');

    router.activate();
}
});

Answer 1

我猜问题确实存在于父 shell.js 中。我用这种方式改变了到子shell的路径：

{ 
  // add *details for splat route, even when there is nothing named 'details'
  route: 'customer/:id*details',
  moduleId: 'customer/shell2',
  name: 'Customer',
  nav: true
}

childrouter shell2.js 如下所示：

define(['plugins/router', 'knockout'], function (router, ko) {
var displayName = 'Customer';
var customerId = ko.observable(0);

var childRouter = router.createChildRouter();

return {
    router: childRouter,
    customerId: customerId,
    displayName: displayName,
    activate: activate
};

function activate(newCustomerId) {
    customerId(newCustomerId);
    // resetting, otherwise every activation adds elements
    childRouter.reset();

    // individual mapping on each activation, so the id is updated in the hashes
    childRouter.makeRelative({ moduleId: 'viewmodels/customers' , route: 'customer/:id/'})
        .map([
        {
            route: '',
            moduleId: 'overview',
            name: 'overview',
            hash: '#customer/'+ v6Id(),
            nav: true,
        },
        {
            route: 'sessions',
            moduleId: 'sessions',
            name: 'Sessions',
            hash: '#customer/'+ v6Id() + '/sessions',
            nav: true,
        }
        ])
        .buildNavigationModel();
}
});

P.S。：别忘了设置＆＃39; nav＆＃39;事实上，这就是为什么我的导航没有显示出来的原因。

P.S.2：也许你应该在主导航和副导航之间的视图中为每条路线添加属性。