在Express/Jade視圖中訪問當前請求

我有一個佈局Jade視圖，它具有通過無序列表的菜單，並且我想在當前頁面在瀏覽器中呈現時將<li>設置爲<li class="active">...</li>。在Express/Jade視圖中訪問當前請求

我想我有機會訪問當前請求，以確定何時設定在<li>

屬性我無法找到如何做任何這樣的例子所以希望有人能幫助

謝謝

2012-10-04 Jon

試試這個呼叫之前res.render（）在你的路線：

res.locals.path = req.path; 
res.render('/page');

或

res.render('/page', { path: req.path });

那麼你就必須做在你的視圖中一堆if/else語句（如上面的解決方案所示）。

- if(currentUrl === '/') 
    li(class='active') 
     a(href='/') Current Driver Standings 
- else 
    li 
     a(href='/') Current Driver Standings

我然而，更喜歡做這個客戶端，而不是，讓我的模板文件從儘可能多的邏輯儘可能免費：

在頁面模板文件（這是EJS，不知道如何迴應在玉）：

<body data-path="<%= path %>">

使用jQuery

然後你可以抓住從身體的路徑和附加的主動類：

$(function(){ 
    var path = $('body').attr('data-path'); 
    $('nav li a[href='+path+']').parents('li').addClass('active'); 
});

更新：您也可以只使用var path = window.location.pathname，而不是將其保存到一個屬性上body

//no need to save path to <body> tag first: 

$(function(){ 
    var path = window.location.pathname; 
    $('nav li a[href='+path+']').parents('li').addClass('active'); 
});

來源

2012-10-04 20:26:38 chovy

我想說的唯一的事情就是你依賴於擁有JS的用戶（這些日子不是一個大問題），但是你最終可能會因爲某些原因而存在其他屬性，並且產生了很多醜陋的標記 – Jon

你的例子中是否還有拼寫錯誤？ EJS中有req.path可用嗎？它不應該是你的視圖模型的財產嗎？ – Jon

對不起，在我的路線我做res.locals.req = req所以我有權訪問所有的信息。但我只是意識到你也可以使用window.location.pathname而不是將其保存在body標籤上。 – chovy

我想出了這個工作，但我不知道它的最佳實踐。請讓我知道任何一種方式：

response.render("current/currentSchedule", { 
       title: "Current Race Schedule", 
       currentUrl: req.path, 
      }); 


ul(class='nav nav-list') 
    li(class='nav-header') Current Season 
    - if(currentUrl === '/') 
     li(class='active') 
      a(href='/') Current Driver Standings 
    - else 
     li 
      a(href='/') Current Driver Standings 
    - if(currentUrl === '/constructor-standings') 
     li(class='active') 
      a(href='/constructor-standings') Current Constructor Standings 
    - else 
     li 
      a(href='/constructor-standings') Current Constructor Standings 
    - if(currentUrl === '/current-schedule') 
     li(class='active') 
      a(href='/current-schedule') Current Race Schedule 
    - else 
     li 
      a(href='/current-schedule') Current Race Schedule

來源

2012-10-04 20:12:17 Jon

這是相當困難的維護，因爲你重複的類名稱和鏈接幾次，也是很多的代碼。查看我的答案以獲取更簡單的方法。它也可以用來處理currentUrl，就像在你的答案中一樣，但是主要的導航項目應該對子路徑保持高亮度，這對你使用的方法不會發生。 –

這裏做，服務器端的一個非常巧妙的辦法：

在你routes.js（或其它地方）限定表示像這樣的資產淨值對象的數組：

var navLinks = [ 
    { label: 'Home', key: 'home', path: '' }, 
    { label: 'About', key: 'about', path: '/about' }, 
    { label: 'Contact', key: 'contact', path: '/contact' } 
]

傳遞navLinks變量到視圖，以及該項目的關鍵您希望加亮後：

res.render('home', { title: 'Welcome!', section: 'home', navLinks: navLinks });

您也可以在navLinks變量添加到app.locals並保存自己總是有明確規定它的意見。

在通過多條鏈路的陣列您玉模板循環

然後並設置其鍵所提供的部分相匹配的活動類：

ul(class='nav nav-list') 
    - navLinks.forEach(function(link){ 
    - var isActive = (link.key == section ? 'active' : '') 
    li(class=isActive) 
     a(href=link.path)= link.label 
    - })

來源

2012-10-18 15:47:20

傳遞req.originalUrl在你的路由文件。例如：在您的 /routes/about左右。JS

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

然後，寫，如果其他條件對你的玉模板

if(url==='/about-us') 
    li(class='active') 
     a(href='about-us') About Us 
    else 
    li 
     a(href='about-us') About Us

來源

2014-08-10 10:09:16

在Express/Jade視圖中訪問當前請求

回答

相關問題