How to add an userbar in a jade template

Question

How to add an userbar in a jade template

I am trying to understand how to set for exemple an userbar in my jade layout actualy I have my layout.jade:

doctype 5
html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    include userbar
    block content

In my include I only have the variable environment on my current page.

Don't bit me, I'll take an exemple in Symfony2 franmwork :D for exemple if you have this code in your layout

{% render "AcmeBundle:Acme:menu" %}

It will call AcmeController and the menuAction() method regardless the current page

I would like to have the same system: the render in my jade page will call for exemple a requestHandler

exports.userbar = function(req, res){
    var user = 'ant';
    res.render('userbar', { user: user })
};

And now this will render my userbar :) But I don't know how to do it with jade

If I am not clear ask me questions

Thanks :)

node.js
express
jade

Answer 1

In your case, you have to add {% render "AcmeBundle:Acme:menu" %} this in each page too. In express, i think you do the same task much more easily. And you have different options here. First option is to use user middleware in specific request handlers like

Add an express middleware that simply finds user and set app.locals property. app.locals are visible for all jade files. For example, this simple middleware should be enough

var user = function(req, res, next)
{
   var user = db.find(...);
   app.locals({user: user});
   next(); // Do not render the page here, call the next() 
}

Then in your routing, use var user as follows :

app.get('/your_desired_url', user, function(req, res) {
    res.render('your_required_jade_file')
});

You can use this method in any request handler you want; for example,

app.get('/your_desired_url2', user, function(req, res) {
    res.render('your_required_jade_file')
});

app.get('/your_desired_url2', user, function(req, res) {
    res.render('your_required_jade_file')
});

In the second option, you can add this middleware as a general middleware, like

app.use(function(req, res, next) {
    var user = db.find(...);
    if(user) app.locals({user: user});
    else app.locals({user: null});

    next(); // Do not render the page here, call the next() 
});

In the second case, all of your requests are passed through this function, so in the .jade files, user varabile is always available.

In your .jade structure, you can use the followings

layout.jade

!!! 5
html
  head
  body
    include userbar
    block content

and for example dashboard.jade:

extends ./layout
block content
  // Your dashboard specific content goes here..

I hope this solves your problem.