Jon Jon - 1 year ago 73
Jade Question

Access current request in Express/Jade view

I have a layout Jade view that has a menu via unordered list, and I want to set the

to be
<li class="active">...</li>
when the current page is rendered in the browser.

I assume I will have to access the current request to determine when to set the attribute on the

I can't find any examples of how to do this so hoping someone can help


Answer Source

Try this before your call res.render() in your route:

res.locals.path = req.path;


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

Then you would have to do a bunch of if/else statements in your view (as the above solution suggests).

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

I however, prefer to do this on client side instead, to keep my template files free from as much logic as possible:

In page template file (this is ejs, not sure how to echo in jade):

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

Then with jQuery you can grab the path from body and attach an active class:

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

Update: You can also just use var path = window.location.pathname instead of saving it to an attribute on body

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

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