在node.js中的活动菜单项和表示

我正在使用node.js ， express和express-handlebars 。 我在我的布局顶部有一个菜单。

在我的server.js ，我设置了所有页面

 app.locals.pages = [ { title: 'Home', link: '/' }, { title: 'About', link: '/about' }, { title: 'Contact', link: '/contact' }, ]; 

并在布局文件中打印页面

 {{#each pages}} <li class="nav-item"> <a class="nav-link" href="{{link}}">{{title}}</a> </li> {{/each}} 

但我想添加一个类到当前正在活动的菜单项。

如何保存3个菜单项中的哪一个是活动的？

Answer 1

我不testing这个代码，但它应该工作，但如果你使用把手，你可以试试这个

 Ember.Handlebars.helper('isSelected', function(v1,v2, options) { if (v1 && v2) { return new Ember.Handlebars.SafeString("active"); }else{ return new Ember.Handlebars.SafeString("nav-item"); } }); 

和你的代码
在你的节点js上

 router.get('/', function( req, res ){ var pageData = {}; pageData.page_link = 'home'; res.render('template_page', pageData ); }); 

在您的模板上

 {{#each page in pages}} <li class="{{isSelected page.link page_link }}"> <a class="nav-link" href="{{page.link}}">{{page.title}}</a> </li> {{/each}} 

再次：我不testing这个。 但处理栏帮手工作正常的HTML元素

Answer 2

您可以传递一个body_id （或任何其他名称）参数从您的路线到您的意见，例如

 router.get('/', function( req, res ){ var pageInfo = {}; pageInfo.body_id = 'homepage'; // assign more parameters relevant for this view here res.render('home_page', pageInfo ); }); 

现在，在你的视图文件中，将body_id指定为body_id的id即ie

body(id= typeof body_id === "undefined" ? "body_id" : body_id)

现在，你可以pipe理你的CSS中的活动链接

 body#home_page .nav_item:nth-child(1), body#about_page .nav_item:nth-child(2), { background-color: red; /* more css styles that you want to give to your active menu item */ }