在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