Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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,444 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.