Durandal.js:更改每个区域的导航选项

Question

我想在我的durandal应用程序的每个"区域"有不同的导航.通过在布局页面中定义导航部分并使用嵌套布局页面为每个区域实现导航,我使用ASP.NET MVC实现了这一点.durandal中的视图结构如下:

http://i1346.photobucket.com/albums/p697/user2269352/viewstructure_zps5e21e724.gif

我正在使用ASP.NET MVC4 durandal模板,我猜我可能需要从shell.html更改以下segement

<ul class="nav" data-bind="foreach: router.visibleRoutes">
    <li data-bind="css: { active: isActive }">
        <a data-bind="attr: { href: hash }, html: name"></a>
    </li>
</ul>

我想理想情况下我希望有单独的html页面可以加载到此部分,具体取决于我正在查看的区域/页面.

Answer 1

您可以通过向路径信息添加设置对象并在其中指定区域名称来完成此操作.有了这个,就可以针对路由器的visibleRoutes集合创建一个计算的observable,它只选择当前区域的路由.

不确定您的路由配置是什么样的,但添加设置的示例如下:

var routes = [
    { url: 'one/page1', moduleId: 'viewmodels/one/page1', name: 'Page 1', visible: true, settings: {area: 'one'} },
    { url: 'two/page1', moduleId: 'viewmodels/two/page1', name: 'Page 1', visible: true, settings: {area: 'two'} }
];
router.map(routes);

在您控制导航html的视图模型中:

//filter the visible routes for the current area
viewModel.areaRoutes = ko.computed(function () {
    var area = this.area;
    return ko.utils.arrayFilter(router.visibleRoutes(), function (route) {
        return route.settings.area === area;
    });
}, viewModel);