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) Doing more with Express Using Logic in Jade Templates

Brendan Thomas
Brendan Thomas
19,661 Points
Posted by Brendan Thomas
Brendan Thomas
19,661 Points

Conditional not doing anything..

I added the conditional statement to my _nav.jade partial, but nothing on the page changes when I start up the app. All the li buttons on the nav are still there.

I copied and pasted the code from https://github.com/hdngr/treehouse-express-basics/blob/final/src/templates/partials/_nav.jade and still no change.

No difference before or after I add the path variable to app.js. None of the nav's li buttons disappear.

Did I miss any steps before adding the conditional to _nav.jade? Should any other files be different?

3 Answers

Brigette Eckert
Brigette Eckert
16,957 Points
Brigette Eckert
Brigette Eckert
16,957 Points

Can you post your code here. Thanks :)

Brendan Thomas
Brendan Thomas
19,661 Points
Brendan Thomas
Brendan Thomas
19,661 Points

The _nav.jade partial

nav#mainNav.navbar.navbar-default.navbar-fixed-top
                    .container-fluid
                        // Brand and toggle get grouped for better mobile display
                        .navbar-header
                            button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                                span.sr-only Toggle navigation
                                |                     
                                span.icon-bar
                                |                     
                                span.icon-bar
                                |                     
                                span.icon-bar
                            |                 
                            a.navbar-brand.page-scroll(href='/') FitLog.io
                        // Collect the nav links, forms, and other content for toggling
                        #bs-example-navbar-collapse-1.collapse.navbar-collapse
                            ul.nav.navbar-nav.navbar-right
                                li
                                        a(href='/blog') Blog
                                if path === '/'
                                    li
                                            a.page-scroll(href='#about') About
                                    li
                                            a.page-scroll(href='#services') Services
                                    |                     
                                    li
                                            a.page-scroll(href='#portfolio') Portfolio
                                    |                     
                                    li
                                            a.page-scroll(href='#contact') Contact
                                    // /.navbar-collapse
                                    // /.container-fluid

The app.js

'use strict';

var express = require('express'),
      posts = require('./mock/posts.json');

var postsLists = Object.keys(posts).map(function(value) {
                                     return posts[value]})

var app = express();

app.use('/static', express.static(__dirname + '/public'))

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

app.get('/', function(req, res){
    var path = req.path;
    res.locals.path = path;
    res.render('index');
});

app.get('/blog/:title?', function(req, res){ 
    var title = req.params.title;
    if (title === undefined) {
        res.status(503);
        res.render('blog', {posts: postsLists})
    } else {
        var post = posts[title] || {};
        res.render('post', { post: post});
    }
});

app.get('/posts', function(req, res) {
    if (req.query.raw) {
        res.json(posts);
    } else {
        res.json(postsLists);
    }
})

app.listen(3000, function() {
    console.log("The frontend server is running on port 3000!");
});

I've copied and pasted these from the final app github linked above and still nothing.

Brendan Thomas
Brendan Thomas
19,661 Points
Brendan Thomas
Brendan Thomas
19,661 Points

I should say, I copied and pasted the github files into my Notepad++ document, and then copied from there onto here.

Brendan Thomas
Brendan Thomas
19,661 Points
Brendan Thomas
Brendan Thomas
19,661 Points

From what I gather from the video, all that was done before these list items in the _nav.jade partial would disappear on the /blog route was he added the " if path === '/' " and then indented everything underneath.