Durandal.js：每面积变化导航选项 [英] Durandal.js: change navigation options per area

问题描述

我想有按我迪朗达尔应用程序的区域不同的导航。我一直在使用领域定义在布局页面导航部分，其具有实现每个区域的导航嵌套布局页时ASP.NET MVC实现这一点。在迪朗达尔视图结构如下：

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:

<一个href=\"http://i1346.photobucket.com/albums/p697/user2269352/viewstructure_zps5e21e724.gif\">http://i1346.photobucket.com/albums/p697/user2269352/viewstructure_zps5e21e724.gif

我使用的是ASP.NET MVC4迪朗达尔模板，我猜，我可能需要更改从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集合，只选择当前区域的路由观察的。

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