Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics (2015) Using Templates with Express Scaffolding Your Project’s Templates - adding “partials”

Lucas Santos
Lucas Santos
19,315 Points
Posted by Lucas Santos
Lucas Santos
19,315 Points

So why would we ever use "block content" over the "include partials" method?

Just wondering after watching this video why we wouldn't just use the include style of keeping the templates organized and why use extends at all?

He showed us we can add a pieces of our .jade templates together like this:

extends ./layout.jade

Then the contents that you are extending uses the block content key word to insert the extended content.

After that video he showed us includes with partials.

Now I use SASS and PHP so partials and includes sounds very familiar to me and seems like a better templating convention.

Ex:

include ./partials/_nav

If it were me by the looks of things I would just make a partials folder with all of the piece to the page that I need such as _header.jade, _nav.jade, _content.jade, _footer.jade

Then simply include them all in an index.jade file.

So why would we ever want to use the extends method of templating over the include method?

1 Answer

akak
akak
29,445 Points
akak
akak
29,445 Points

With include you are always including the same file. When extending you are including the same file, but you can modify it's content with block. For example

header.jade 

doctype html
html(lang='en')
head
    block title
        title Chat App
    link(rel="stylesheet", href="/css/bootstrap.min.css")
    style.
        body {
            padding:20px;
        }

some other jade file

extends header

block title
    title Change chat password

another one

extends header.jade

block title
    title Confirmation

etc...

Thanks to that I have all styles I need, but a different title than on my main page.