Yitong Zhou
Yitong Zhou

Reputation: 1175

The layout.jade is not working, why?

This is my configure file: The layout.jade does not seem to be working. But the jade is working. I used Chrome to check, and am sure that the layout HTML is not loaded into the page.

module.exports = function(app, express, mongoose){
    var config=this

    app.configure(function (){
        app.set('views',__dirname+'/views')
        app.set('view engine','jade')
        app.set('view options', {layout:true})

        app.use(express.bodyParser())
        app.use(express.methodOverride())
        app.use(express.cookieParser())
        app.use(express.session({secret: 'topsecret',store: new express.session.MemoryStore}))
        app.use(express.static(app.path.join(app.application_root,"public")))
        app.use(express.errorHandler({dumpExceptions:true,showStack:true}))
        app.use(express.bodyParser({keepExtensions: true, uploadDir:"./public/uploads"}))
        app.use(app.router)
    })

    /*DB part:*/
    app.mongoose.connect('mongodb://localhost/dio_database')

    return config
}

The render command:

app.get('/items/:id',function(req,res){
    models.ItemModel.findOne({_id:req.params.id}).exec(function(err,item){
        if (!err){
            res.render('item.jade',item)
        } else
            return console.log(err)
    })
})

My layout.jade, quite simple:

!!!
doctype 5
html
    head
        title "Dio"
        link(rel='icon', href='favicon.ico', type='image/x-icon')
        link(rel='shortcut', href='favicon.ico', type='image/x-icon')
        link(rel="shortcut", href="favicon.ico", type="image/vnd.microsoft.icon")
        link(rel="icon", href="favicon.ico", type="image/vnd.microsoft.icon")

        script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js")
        script(src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js")
        script(src="./javascripts/underscore-min.js")
        script(src="./javascripts/backbone-min.js")

        link(rel='stylesheet', href='./css/main.css', type="text/css", media="screen")
    body
        div#topbar Dio--where shitty thing happens
        div#main!= body
            footer
                p
                    | Node.js MVC template by XXX

And the following is my npm list:

├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected] extraneous
│ ├── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
└── [email protected]

Upvotes: 2

Views: 3225

Answers (1)

Yitong Zhou
Yitong Zhou

Reputation: 1175

Actually the reason for such problem is quite simple: Express 3 no longer supports layout..But do not be sad. Actually Express 3 begins to adopt a more natural and easier way, which is called block/extends. The basic usage should be like this:

// In layout file: layout.jade
html 
    head
        title XXX
        block scripts
    body
        block content
        block footer


// in a extended file, for example index.jade:
extends layout
block scripts
    //write javascript part
block content
    // write content
block footer
    // write the footer

It actually becomes easier and more flexible. Glad to get it finally. But it took me more than 2 hours.

I am just wondering why so few people mentioned this change more clearly and openly. Hope this post can help some people like me.

Upvotes: 12

Related Questions