Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

node.js + jade + express: How can I create a navigation that will set class active if the path matches

I have come up with the following code but the problem is, there will be duplication of the anchor tag for each menu item.Is there a better way to do this?

                ul.nav
                    - if(menu="Home") 
                        li.active
                            a(href="#") Dashboard
                    else
                        li
                            a(href="#") Dashboard
                    li 
                        a(href="#") About
                    li 
                        a(href="#") Contact
like image 600
Vartan Arabyan Avatar asked May 23 '12 05:05

Vartan Arabyan


People also ask

What is Express Router () in node js?

js server. The express. Router() function is used to create a new router object. This function is used when you want to create a new router object in your program to handle requests. Multiple requests can be easily differentiated with the help of the Router() function in Express.

How does routing work in Express?

Routing refers to how an application's endpoints (URIs) respond to client requests. For an introduction to routing, see Basic routing. You define routing using methods of the Express app object that correspond to HTTP methods; for example, app.get() to handle GET requests and app.post to handle POST requests.

Is it possible to use class in node js?

It is possible to write a class in Node. js using JavaScript. JavaScript has OOP support when we use prototypes. Let's look at an example to understand how to write a class in Node.


1 Answers

Found this in another question that was similar:

Use a ternary at each "li"

ul
    li(class=(title === 'Home' ? 'active' : ''))
        a(href='#') Home
    li(class=(title === 'Dashboard' ? 'active' : ''))
        a(href='#') Dashboard

You can setup your routes to pass the "menu" value instead of using "title" if you want:

exports.index = function(req, res) {
    res.render('index', {title: 'Home', menu: 'Home'});
}
like image 136
crussell Avatar answered Sep 20 '22 16:09

crussell