从迪朗达尔主导航

Question

我已经看到了这个问题Durandal js router setup，想问问迪朗达尔主导航中添加类型创建两个导航... 这里是我的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

创建这样的样本主要资产净值两个导航

我想，这样我可以把正确的导航，像登录和左边其他导航...

Answer 1

纵观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取决于如果您有路线上的路线，你不要不想出现。