在 Express 中将菜单渲染为 Jade 视图部分

Question

我无法概念化如何使用 Jade 视图部分在 Express 应用程序中渲染具有活动状态的菜单。

我有这样的事情：

ul.menu
  li
    a(href='/some/route').active
  li
    a(href='/another/route')

我想要的是将 .active 类应用于当前路由，以便我的 CSS 可以呈现活动的 UI 状态。

当我用 PHP 编写时，这可以通过一些复杂的 if/else 语句链来完成，但我假设有一种更优雅的方法。我缺少什么？

Answer 1

我的解决方案与 danmactough 的类似，但我认为更简洁。

我使用中间件将 url 保存为所有请求的本地变量。确保它出现在您的路线之前。

app.use(function(req, res, next) {
  res.locals.url = req.url;
  next();
});

我的 Jade 菜单模板如下所示

ul
  each link in links
    li
      a(href=link.url, class=link.url === url && 'active')= link.name

Answer 2

杰德对路线一无所知。我认为没有任何方法可以避免某种形式的 if/else。

在 Express 中，只需将路线作为本地传递即可：

res.render('my_view', {
  current: 'current/url'
});

在视图中，有一系列菜单链接并执行以下操作：

ul.menu
  for each item in links
    li
      if (item.url == current)
         a(href=item.url).active
      else
         a(href=item.url)