將菜單渲染爲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