【问题标题】:The layout.jade is not working, why?layout.jade 不工作,为什么?
【发布时间】:2012-12-09 01:09:19
【问题描述】:

这是我的配置文件: layout.jade 似乎不起作用。但玉在起作用。我用Chrome检查,确定布局HTML没有加载到页面中。

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
}

渲染命令:

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)
    })
})

我的layout.jade,很简单:

!!!
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

以下是我的 npm 列表:

├─┬ bcrypt@0.7.3
│ └── bindings@1.0.0
├─┬ express@3.0.3
│ ├── commander@0.6.1
│ ├─┬ connect@2.7.0
│ │ ├── bytes@0.1.0
│ │ ├── formidable@1.0.11
│ │ ├── pause@0.0.1
│ │ └── qs@0.5.1
│ ├── cookie@0.0.5
│ ├── cookie-signature@0.0.1
│ ├── crc@0.2.0
│ ├── debug@0.7.0
│ ├── fresh@0.1.0
│ ├── methods@0.0.1
│ ├── mkdirp@0.3.3
│ ├── range-parser@0.0.4
│ └─┬ send@0.1.0
│   └── mime@1.2.6
├── fs@0.0.0
├── imagemagick@0.1.3
├─┬ jade@0.27.7
│ ├── coffee-script@1.4.0
│ ├── commander@0.6.1
│ └── mkdirp@0.3.4
├─┬ mongodb@1.2.2
│ └── bson@0.1.5
├─┬ mongoose@3.4.0
│ ├── hooks@0.2.1
│ ├─┬ mongodb@1.1.11
│ │ └── bson@0.1.5
│ ├── ms@0.1.0
│ └── sliced@0.0.3
├─┬ node-static@0.6.5 extraneous
│ ├── colors@0.6.0-1
│ └─┬ optimist@0.3.5
│   └── wordwrap@0.0.2
└── path@0.4.9

【问题讨论】:

  • 好吧,我觉得问题是新的翡翠不再支持布局,而是支持block和extends。我只是想知道这件事是否如此轻微以至于很少有人清楚地提出它?我花了 2 个小时才弄明白。
  • Express3 不再支持布局
  • 您的 item.jade 模板在哪里?另外,如果有任何错误输出,您能否用错误输出更新您的问题?...另外,请检查您将 item 作为本地 var 传递给模板的方式...。它不应该是 {item: item} 吗? ?也许您应该尝试更简单的布局和项目模板渲染来测试您的案例...
  • Express 中间件应始终返回响应...在您的 else 子句中,您将返回一个未定义的(来自 console.log...)
  • @CristianDouce 它没有产生任何错误。正如我所说并同意 Jonathan Ong 的观点。 Express 3 不再支持布局。

标签: node.js express pug


【解决方案1】:

其实这个问题的原因很简单: Express 3 不再支持布局..但不要难过。实际上 Express 3 开始采用一种更自然、更简单的方式,称为 block/extends。 基本用法应该是这样的:

// 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

它实际上变得更容易和更灵活。很高兴终于得到它。但是花了我2个多小时。

我只是想知道为什么很少有人更清楚、更公开地提到这一变化。希望这篇文章可以帮助像我这样的人。

【讨论】:

  • 感谢并快速说明,以确保您在扩展文件中缩进您的块代码,就像 @Yitong 对 cme​​ts 所做的那样。
  • 希望我能给你多于一票。这个解决方案和上面的评论,终于帮我解决了为什么我的扩展文件没有显示。谢谢!
猜你喜欢
  • 1970-01-01
  • 2018-02-23
  • 2016-11-19
  • 1970-01-01
  • 2015-06-15
  • 2013-06-01
  • 2011-09-29
  • 2014-05-16
  • 2011-01-21
相关资源
最近更新 更多