creating two navigation from the main nav in durandal

Question

i have seen this question Durandal js router setup and would like to ask add a type within the durandal main navigation ... here is my code in 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();





        }
    };


});

and here is my 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>

how do I create a two navigation from the main nav like this sample over here https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/ko/index.js

I want so that I can put one navigation on the right, like login and other navigation on the left...

Nathan Fisher · Answer 1 · 2015-05-07T01:12:27.300

Looking at the github sample and the sample you have provided I think all you need to do is add a couple of functions that filters the routes for the specific flag.

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();
        }
    };
});

Then bind to your html menus to either the leftNav or rightNav instead of router.navigationModel

You need to add an extra filter to only display those routes that have nav= true depending on if you have routes that you don't want to show up.

creating two navigation from the main nav in durandal

1 Answers1