Question

I am currently working with the Express framework for Node.js and I am having trouble including stylesheets and javascript files on a per page (route) basis. I am using the default Express setup with a routes/index.js file with the following content:

exports.index = function(req, res){
    res.render('index', { title: 'Index Page Test' })
};
exports.browse = function(req, res){
  res.render('browse', { title: 'Browse Page Test' })
};

The routes above works fine and it loads index.jade and browse.jade into the “body” of layout.jade as expected. However, the assets (CSS and JS files) that the index route requires is not the same as what the browse route requires. Is it possible for me to pass an array to the layout.jade template containing the required assets and simply have it looped?

I attempted to do the above via:

Index.js (Route)

scripts: [
   'javascripts/jquery.js',
   'javascripts/easel.js',
   'javascripts/script.js'
]

Followed by:

Layout.jade

    each js in scripts
        script(src= js)

However, it simply throws an error saying “scripts is not defined.”
I am pretty sure I am not doing this right. Also, just to add, I stumbled upon another similar StackOverflow question here: Node.js with Express: Importing client-side javascript using script tags in Jade views?
But I am not too keen on the method shown there (it requires an additional helper). If possible, I would like to stick to the functions provided by the template engine itself.

Thanks.

EDIT: If it helps, I am trying to achieve something similar to this: http://kerkness.ca/kowiki/doku.php?id=template-site:create_the_template

Answer 1

Try to pass the scripts array to the views like this:

res.render('index', { title: 'Index Page Test', scripts: scripts})