node.js 和express中的活动菜单项

Question

我正在使用

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

我解决了这个问题，没有通过路由器请求传递参数。只需简单地创建一个 js 文件来导航部分，将位置的活动路径传递给导航项并添加一个活动类。

(function($) {
   $(document).ready(function() {
      // get current URL path and assign 'active' class
      var pathname = window.location.pathname;
      $('.nav.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
  });
})(jQuery);

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

指定为

id

的

body

，即

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

现在，您可以将 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 */
}

Answer 3

我还没有对你的代码进行测试，但我认为它应该有效。使用车把的时候可以试试这个

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}}

再说一遍，我还没有测试过这个。但把手助手可以很好地处理 HTML 元素。