NoteTutes with Express 3.0: Jade layouts, partials and includes

Express 3.0 removed partials and layouts and now expects the template engine to take care of them. Many tutorials and helpful websites are now "broken". Here's how to make the NodeTutes Episode 10 work:

app.js

(changed lines in bold)

var express = require('express');

var app = express();

app.configure(function() {
  app.use(express.logger());
  app.use(express.static(__dirname + '/static'));
});

app.configure('development', function() {
  app.use(express.logger());
  app.use(express.errorHandler({
    dumpExceptions: true,
    showStack: true
  }));
});

app.configure('production', function() {
  app.use(express.errorHandler());
});

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');


app.get('/', function(req, res) {
  res.render('root');
});

var products = require('./products');

app.get('/products', function(req, res) {
  res.render('products/index', { products: products.all });
});

app.get('/products/:id', function(req, res) {
  var product = products.find(req.params.id);
  res.render('products/show', { product: product });
});


app.listen(4000);

The main difference is that you don't have to call the variables that you give to the template "locals", you just pass them as the second argument to render.

layout.jade:

!!! 5
html
  head
    link(rel='stylesheet', href='/stylesheets/styles.css')
    title Express demo app!
  body
    #main
      yield

The yield call makes sure that the view page which includes the layout will sit inside the main div.

index.jade:

include ../layout
  h1 Products:
  #products
    - each product in products
      include product

product.jade

Put this file in the same directory as index.jade

h2= product.name
p= product.description
p Price: #{product.price}

show.jade

Put this file in the same directory as index.jade

include ../layout
  h2= product.name
  p= product.description
  p Price: #{product.price}
  p
    a(href='/products') Back

Comments

wow. thank you. I've spent the better part of the day scouring the Internet looking for why my layout.jade was not being loaded when I rendered a different template. every example on the Internet used the method I was using and it still wouldn't work. it's a pretty important footnote for express 3.0. thank you for explaining so simply.

Should "yeild" be yield?  I had some porblems until I changed the spelling, other than that very good guide.

Hmm, I think you are right! I must have typed that in manually for some reason instead of pasted. Have changed it now.

Thank you so much for writing this. The explanations about switching to includes from partials for Express 3.x was NOT sufficient - and most of the best 'how-to' examples are written in Express 2.x - so your work saved me an unkown quantity of hours.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.