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

Question

我在使用Jade view partials在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();
});

菜单的My Jade模板如下所示

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

Answer 2

Jade对这条路线一无所知。我认为没有办法以某种形式避免if / else。

在快递中，只需将路线作为本地传递：

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)