Durandal.js:更改每个区域的导航选项 [英] Durandal.js: change navigation options per area

问题描述

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

I want to have different navigation per "area" of my durandal application. I've achieved this with ASP.NET MVC when using Areas by defining a Nav section in the layout page and having nested layout pages which implement the nav for each area. The view structure in durandal is as follows:

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

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

I'm using the ASP.NET MVC4 durandal template and I am guessing that I might need to change the following segement from shell.html

<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 页面加载到此部分中.

I suppose that ideally I'd like to have separate html pages that could be loaded into this section depending on which area / page I am viewing.

推荐答案

您可以通过将设置对象添加到您的路线信息并在此处指定区域名称来完成此操作.准备好之后，针对路由器的 visibleRoutes 集合创建一个计算的 observable，该集合仅选择当前区域的路由.

You can accomplish this by adding a settings object to your route info, and specifying the area name there. With that in place, create a computed observable against the router's visibleRoutes collection that selects only the routes for the current area.

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

Not sure what your route configuration looks like, but an example of adding settings would be something like this:

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 的视图模型中:

In your view model where you are controlling the navigation 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);

这篇关于Durandal.js:更改每个区域的导航选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！