I am Hack Sparrow
Captain of the Internets.

Express.js Jade Partials – How to use them

What are Partials and how do you use them in Express?

Partials are mini views that can be rendered in a HTTP response. They are mainly used for modularizing the view of an HTTP response. Since Jade is the default HTML template engine, this post explains what partials are in Express assuming we are talking about Jade partials for Express.js.

Partials are regular Jade templates that caters to specific part of a larger view. For example, if you want to break up the view of a page of videos, you might do something like this:

File: videos.jade

- each video in videos
!=partial('partials/video', {title:video.title, artist:video.artist})

File: partials/video.jade

.video #{title} by #{artist}

The usefulness of partials may not be very obvious in the above example, but you can guess their importance in more complicated use-cases. Also note, you need not keep your partials in a directory named partials, keep it anywhere, just point to it right.

There are two ways of using partials in Express - i. In Express using res.partial(), ii. In Jade using !=partial(). If you are familiar with res.render() using Jade, you already know how to use partials. Their syntax look like this:

In Express

res.partial(template name[, options]);

In Jade

!=partial(template name[, options])

where template name and options are exactly what you pass to res.render().

Wondering what's the difference between res.render() and res.partials()?

res.render() is used to send a whole HTML page, code>res.partials() is used for sending HTML snippets (mainly as Ajax response). You could use res.render() to send HTML snippets too by setting the layout option to false, but why create confusion? It's best to maintain the distinction - res.render() for HTML pages, res.partial() for HTML snippets.

And ... what is the difference between include and partial in Jade?

You cannot pass objects to include templates, you can pass objects to partial templates. Use includes for non-dynamic views, partials for dynamic views. If you are familiar with Flash, partials are best used as ItemRenderers.

So that's pretty much about partials in Express.js. I hope you understood how partials work in Express now. Any questions, remarks, need more examples? Ping me in the comments.

14 Responses to “Express.js Jade Partials – How to use them”

  1. James says:

    Thank you SO much for writing this! It was very helpful, especially for someone like me, who is coming to web development completely new to all these technologies, but not to programming in general.

    The problem with these frameworks, and other frameworks, is the creators just blatantly assume everyone knows what views, partials, and template engines mean (among other terms) as if everyone using these are already experts in web framework terminology. None of the docs for any web framework, Rails, and Express in particular, bother to explain this terminology as it relates to the frameworks in question, and for someone new to this, it can be extremely frustrating.

    Again, thank you. Your post has been very helpful!

  2. Captain says:

    Glad you found it useful, James. All my efforts are the result of the pain I have gone through. I hope to makes the lives of new web developers a little bit happier. Cheers!

  3. Vivek says:

    Great… Very helpful..

  4. Deepak Singhvi says:

    Thanks a lot Captain. Its very useful and consolidated information for the starters.

  5. Nate says:

    Great post, and totally agree with first comment. All learning material for express, Jade assumes the the web developer knows about views, partials, etc. is there a guide that can explain Jade concepts at a noob level and how it differs from AJAX?

  6. Captain says:

    Hi Nate, I have been working on a Jade tutorial for a while, will be publishing it one of these days. In the mean time, Jade and AJAX are completely different stuff. AJAX is a mechanism to makes server requests in the background, while Jade is a system to generate HTML code. Feel free to ask me any doubts, or for tips.

  7. Capy says:

    really, thank you.

  8. artiee says:

    partial(template [,options]) is outdated in the newest jade. Use “include” instead, e.g.
    include index.jade

  9. Captain says:

    Yes it is not supported anymore in the latest Jade, but it is likely to make a comeback in the future versions.

  10. Sreekesh Okky says:

    But now hen i use
    res.partial(template name[, options]);
    I get an error there is no partial function.

    i have a partial i have to render at end of a function how to render it?

Make a Comment