создание двух навигаций из основной навигации в Durandal

я видел этот вопрос настройка маршрутизатора Durandal js и хотел бы попросить добавить тип в Durandal основная навигация... вот мой код в оболочке, 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

Я хочу, чтобы одна навигация была справа, например логин, а другая слева...


navigation durandal-2.0 durandal-navigation
person kabue7    schedule 02.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Глядя на образец 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-меню к leftNav или rightNav вместо router.navigationModel.

Вам нужно добавить дополнительный фильтр, чтобы отображать только те маршруты, которые имеют nav= true, в зависимости от того, есть ли у вас маршруты, которые вы не хотите отображать.

person Nathan Fisher    schedule 07.05.2015