将菜单渲染为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

玉对路线一无所知。我不认为有任何方法可以避免这种或那种形式的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) 

Answer 2

我的解决方案类似于danmactough的，但我觉得有点整齐。

我使用中间件将url作为局部变量保存在所有请求中。确保这是在你的路线之前。

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

的菜单

我的玉模板看起来像这样

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