玉模板條件類nodejs expressjs

我有一個玉的模板文件爲我的頭和使用引導標記。根據用戶所處的頁面，導航欄需要將class .active添加到該導航項。最好的辦法是避免這樣的長代碼。玉模板條件類nodejs expressjs

header.jade

if nav=='home' 
    li.active 
     a(href="/") Home 
else 
    li 
     a(href='/') Home 
if nav=='about' 
    li.active 
     a(href='/about') About 
else 
    li 
     a(href='/about') About

路線

router.get('/about', function(req, res) { 
    res.render('about', { nav:'about' }); 
});

注意如何是否有頭有更多的聯繫，它會變得更長。有沒有更好的方法在正在瀏覽的頁面上添加「活動」類？

感謝泰勒

來源

2014-06-27 Tyler Evans

這個navbar是全部硬編碼的嗎？你可以重構使用循環嗎？在這個方向上有一些選項... –

嗨，通常是的，它是硬編碼的..但會改變一旦用戶登錄..不知道有什麼幫助。 –

您可以創建一個處理一個列表項的呈現一個mixin。這樣你的邏輯代碼就不必重複了：

mixin header-item(name, url) 
    if name.toLowerCase() == nav 
    li.active 
     a(href=url)= name 
    else 
    li 
     a(href=url)= name 

+header-item('Home', '/') 
+header-item('About', '/about')

來源

2014-06-27 15:53:11

非常感謝你！ –

乾杯，這工作很好！ –

玉模板條件類nodejs expressjs

回答

相關問題