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

您可以将路线中的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的{{1}}，即

body

现在，您可以将css中的活动链接作为

进行管理

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

Answer 2

我不会为你的代码测试这个，但它应该有效，但如果你使用把手，你可以试试这个

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元素

Answer 3

我解决了它而没有通过路由器请求传递params。只需简单创建一个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);

node.js中的活动菜单项和表达式

3 个答案: