1

我已经看到了这个问题Durandal js router setup并想问在 durandal 主导航中添加一个类型...这是我在 shell,js 中的代码

define(function (require) {
    var router = require('plugins/router');

    return {
        router: router,
        activate: function () {
            return router.map([
                { route: ['', 'home'],      title: 'Home',          moduleId: 'MVVM/home/home',             type: 'left',               nav: true },
                { route: 'pastpaper',       title: 'PastPaper',     moduleId: 'MVVM/pastpaper/pastpaper',   type: 'left',               nav: true },

               // Account Controller urls
               { route: 'login',            title: 'Login',         moduleId: 'MVVM/account/login/login',   type: 'right',              nav: true }
            ]).buildNavigationModel()
              .mapUnknownRoutes('MVVM/not-found/not-found', 'not-found')
              .activate();





        }
    };


});

这是我的 shell.html

<div data-bind="css: { 'st-loader': router.isNavigating }" style="top: -5px; position: fixed;"><span class="l-1" style="background: #000000;"></span><span class="l-2" style="background: #000000;"></span><span class="l-3" style="background: #000000;"></span><span class="l-4" style="background: #000000;"></span><span class="l-5" style="background: #000000;"></span><span class="l-6" style="background: #000000;"></span></div>

<!--header>
    <span> Examination PastPaper Archive </span>
</header-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
            <i class="fa fa-home"></i>
            <span style="font-weight:bold">epa</span>
        </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav" data-bind="foreach: router.navigationModel">
            <li data-bind="css: { active: isActive }">
                <a data-bind="attr: { href: hash }, text: title"></a>
            </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li role="search">
                <form>
                    <input class="search-input" placeholder="Search Here" name="q" autocomplete="off" spellcheck="false" type="text">
                </form>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <span>Dropdown</span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#/view/a">Option A</a></li>
                    <li><a tabindex="-1" href="#/view/b">Option B</a></li>
                </ul>
            </li>
            <li><a href="#">Dashboard</a></li>
            <li data-bind="css: { active: router.navigationModel().isActive}"><a data-bind="attr: { href: router.convertRouteToHash('login') }"><i class="fa fa-lock"></i>&nbsp; Login/Register</a></li>
            <li class="loader">
                <i class="fa fa-spinner fa-spin fa-2x"></i>
            </li>
        </ul>
    </div>
</nav> 





    <div class="page-host" data-bind="router: { transition:'entrance', cacheViews:true }">

    </div>

如何从主导航创建两个导航，就像这里的示例一样 https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/ko/index.js

我想要这样我可以在右侧放置一个导航，例如左侧的登录和其他导航......

4

1 回答 1

0

查看 github 示例和您提供的示例，我认为您需要做的就是添加几个函数来过滤特定标志的路由。

define(function (require) {
    var router = require('plugins/router');
    return {
        router: router,
        leftNav: ko.computed(function() {
            return ko.utils.arrayFilter(router.navigationModel(), function(route) {
                return route.type == 'left';
            });
        }),
        rightNav: ko.computed(function() {
            return ko.utils.arrayFilter(router.navigationModel(), function(route) {
                return route.type == 'right';
            });
        }),
        activate: function () {
            return router.map([
                { route: ['', 'home'],      title: 'Home',          moduleId: 'MVVM/home/home',             type: 'left',               nav: true },
                { route: 'pastpaper',       title: 'PastPaper',     moduleId: 'MVVM/pastpaper/pastpaper',   type: 'left',               nav: true },

               // Account Controller urls
               { route: 'login',            title: 'Login',         moduleId: 'MVVM/account/login/login',   type: 'right',              nav: true }
            ]).buildNavigationModel()
              .mapUnknownRoutes('MVVM/not-found/not-found', 'not-found')
              .activate();
        }
    };
});

然后将您的 html 菜单绑定到leftNavorrightNav而不是router.navigationModel

您需要添加一个额外的过滤器以仅显示那些路由，nav= true具体取决于您是否有不想显示的路由。

于 2015-05-07T01:07:21.093 回答