Navigation 从durandal中的主导航创建两个导航
我看到了这个问题,想在durandal主导航中添加一个类型。。。 这是我在shell中的代码,jsNavigation 从durandal中的主导航创建两个导航,navigation,durandal-2.0,durandal-navigation,Navigation,Durandal 2.0,Durandal Navigation,我看到了这个问题,想在durandal主导航中添加一个类型。。。 这是我在shell中的代码,js define(function (require) { var router = require('plugins/router'); return { router: router, activate: function () { return router.map([ { route: [
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> 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>
如何从主导航创建两个导航,就像这里的示例一样
我想这样我就可以把一个导航放在右边,比如登录和左边的其他导航…看看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的路线,具体取决于您是否有不想显示的路线