CODEWITHSUNDEEP
node.jsexpresspug
ZAR
ZAR

Reputation: 2736

Jade block not rendering

I'm sure I'm missing some small thing. I'm playing around with jade templates in express. I'm trying to experiment with blocks and extensions. For some reason my block isn't working. Here is the jade templates:

layout.jade

  doctype html
  html
    head
      title= title
      link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
      link(rel='stylesheet', href='/stylesheets/style.css')
      script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
      script(src='/javascripts/bootstrap.min.js')
    body
      block content

index.jade

extends layout

block content
    header
        section
            h1 Hello
            p.
                This is my first jade template
                How incredibly exciting!
    main
        div(class="row")
            div(class="col-md-6")
                block colOne
            div(class="col-md-6")
                block colTwo

colOne.jade

extends index

block colOne
    section
        p.
            this will be col one

colTwo.jade

extends index

block colTwo
    section
        p.
            this will be the second col.

index.jade is successfully extending layout.jade. But colOne and colTwo are not being rendered.

I've tried setting my view options to {layout: false}, hasn't changed anything.

The router is simply pointing toward the index.jade file:

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express Mon'});
});

I also saw that I'm supposed to render the lowest in the chain. That's why I render index and not layout. Does that mean I have to res.render('colOne')? I tried that, and I got my index and layout pages, but still no colOne. Plus, how would this reference colTwo?

**Last side note, my bootstrap columns are not working either.. ha. EDIT:**columns are working, I just had chrome inspector open to wide... Front end dev...

Where am I screwing up?

Upvotes: 2

Views: 1488

Answers (1)

Siddharth Srivastva
Siddharth Srivastva

Reputation: 965

First would suggest adding jquery before the bootstrap js file. Second

I understand that you want to render the colOne and Coltwo into the col-md-6 divs of index. To do that you don't have to extend index in colOne and colTwo..that way you are adding index to colOne not the other way round.

Correct way would be: index.jade

main
        div(class="row")
            div(class="col-md-6")
                include colOne //include ../folder/filename.jade
            div(class="col-md-6")
                include colTwo

colOne and colTwo.jade remove

extends index.jade

Hope this helps

Upvotes: 3

Related Questions