I was curious to see if it’s possible to create tabbed navigation and pass current URL parameter to jade from node.js.
It is in fact doable and fairly easy.
In your node.js server, make sure to pass the current URL variable to the your template:
app.get('/users', function(req, res){
controller.getUsers( function(error, userData){
res.render('users.jade',{ locals: {
users:userData,
currentURL:'/users/'
}
});
});
});
Then, in your jade template, use the conditionals to check for current URL:
div#nav ul li if(currentURL == '/trends/') a(href='/trends/').current Trends else a(href='/trends/') Trends li if(currentURL == '/users/') a(href='/users/').current Users else a(href='/users/') Users li if(currentURL == '/seeds/') a(href='/seeds/').current Seeds else a(href='/seeds/') Seeds
And here’s a bonus CSS to create nice tabs as your top nav:
#nav ul{text-align:left;border-bottom:1px solid #ccc; list-style-type:none;padding:10px 10px;} #nav ul li{display:inline;} #nav ul li a{font-weight:bold;border:1px solid #ccc; text-decoration:none;padding:10px 20px; border-bottom:none;margin-right:5px; margin-bottom:1px;background-color:#eee} #nav ul li a.current{background-color:#fff; border-bottom:1px solid #fff;} #nav ul li a:hover{color:#000;background-color:#eee;}
Can you post the whole code?? I did not get the idead what controller is. Or what the getusers function does?
Thanks for your comment Aardra. The subject of this post is just to show that you can pass variables from server-side to front-end in node.js, and based on that create a tabbed navigation easily.
Controller is a class that allows my app to interface with a database, and getUsers is a method that fetches users from a table in my database. To get a better understanding on how to build an application with node.js, please look for tutorials online (sorry I don’t have a full tutorial on my blog yet): http://shapeshed.com/creating-a-basic-site-with-node-and-express/
http://net.tutsplus.com/tutorials/javascript-ajax/node-js-for-beginners/