IT IS HERE! Get Smashing Node.JS on Amazon Kindle today!
Show Posts
← Back to homepage

With Express 3.0 the view functionality is slimming down even further. Today res.render not only integrates with template engines but also introduces the concept of layouts.

The layout option and functionality is being removed in favor of more flexible alternatives that template engines can offer without Express solving it for them.

Jade saw the introduction of the extends and block citizens. A template now:

  • Expresses what layout it belongs to, which is a more natural fit in web applications.
  • Declares what blocks it extends, which means a template can add markup to more than one part of the layout.
// my-template.jade
extends my-layout
  
block head
  script(src="myfile.js")

block content
  h1 My page
// my-layout.jade
doctype 5
html
  head
    title My title
    block head
  body
    #content
      block content

In addition to “filling” a certain gap in the template, you can leverage the append and prepend keywords to have different templates modify others incrementally.

This simplification is a win for everyone. res.render now just focuses on providing the glue to other modules, your routes will simplify, and understanding what a template ultimately renders is easier.

9 Comments

Enome said

A nice feature would be if you could reuse the name of a block. If I am correct and you do that now it will overwrite the block of the top most parent.

For example with this structure: http://i.stack.imgur.com/t2Pt5.png

If all the blocks would be named content you could switch nodes by just changing extends. As it is now you need something like content, subcontent, subsubcontent, etc. (correct me if I am wrong)

Guillermo Rauch said

Wouldn’t that be solved by prepend ?

Enome said

Don’t you need to repeat prepend on each child? I meant something like this: https://gist.github.com/1791781 Could be I am horribly wrong I didn’t use prepend yet. :)

Clemens said

how would we do https://gist.github.com/1860089 in express 3.0?

Chase Brammer said

I really like blocks, much more robust templating. However, I noticed in Express 3.0 that partials are missing. Whats in the plans as they relate to partials?

Steve Schwartz said

I’m having trouble figuring out how I’d render several partial views in a page in Express 3.x using Jade. I have a bunch of widgets (pulled from the database), and each widget type has its own view.jade partial that needs to be included in the page. With partials, it’s easy; with jade blocks, I can’t quite wrap my head around a good approach.

Any suggestions? Here’s what I’m trying to accomplish: https://gist.github.com/3166956

Mountshan said

I wonder what I should do when I use ejs ?

Steven said

I’m Still trying to see how you can use a layout in a folder in the root of the application. I currently have a /views/layout.jade and a /apps/foobar/views/file.jade. I’m trying to render the global layout but it keeps looking in the /apps/foobar/views folder. Any ideas?

Anton said

indeed, what about EJS?

Your thoughts?

About Guillermo Rauch:

CTO and co-founder of LearnBoost / Cloudup (acquired by Automattic in 2013). Argentine living in SF.