CODEWITHSUNDEEP
node.jslayoutexpress
austinbv
austinbv

Reputation: 9491

Express not finding/using layout

I am trying to use express and render a layout.jade my directory tree is pretty standard.

├── apps
│   └── fridge_face
│       ├── routes.coffee
│       └── views
|           └── index.jade
├── server.js
└── views
    ├── layout.jade
    └── stylesheets
        └── style.styl

In my routes.coffee when I render index.jade everything words fine, but layout is not rendered. I have tried moving layout into apps/fridge_face/views/ but that was not successful.

I have done no layout configuration.

Here is my

layout.jade

doctype 5
html
  head
    title 'What is up'
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    != body

routes.coffee

routes = (app) ->
  app.get '/', (req, res) ->
    Word.once 'wordsFetched', (params) ->
      res.render "#{__dirname}/views/index",
        layout: true
        words: params.map (word) -> word.word

    Word.getWords()


module.exports = routes

server.js config

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express['static'](__dirname + '/public'));
});

As you can see nothing that could or would make the layout not render... what am I doing wrong how do I get express to find my layout

Edit

I know I am making this question super long but adding some developments. First

When I remove the != from the layouts in both directories, nothing changes. My view is still rendered layout free.

When I add 

app.set('view options', {
  layout: false
});

and then explicitly render my layout in my view with either

layout: "#{__dirname}/views/layout"
# OR
layout: "layout"
# OR
layout: true

Nothing happens and the view is rendered layout free...

Upvotes: 4

Views: 4704

Answers (4)

Hitesh Aidasani
Hitesh Aidasani

Reputation: 63

As someone above said, you're using version 3.0 which got rid of layout & partials & lets the templating engine handle that. Here's the answer via the migration wiki:

"To get back layout functionality with EJS you can use express-partials or ejs-locals."

(from https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x )

I ended up using express-partials & it worked exactly as it is in their example. I was unable to post the link to ejs-locals as I don't have enough reputation yet but you can find it on the wiki.

Upvotes: 6

Daniel Flores
Daniel Flores

Reputation: 770

If layout doesn't work you can try with partial, I'm using ejs :

app.get('/', function(req,res){
 res.render('layout.ejs', { layout:false,
   locals : {
        body: '../apps/index.ejs' ,
        name : "Daniel"
 }});
});

And in layout.ejs:

<html>
...
<%-partial(body)%>
<html>

In index.ejs :

<h1>Hola</h1>
<%=name%>

Upvotes: 0

Pavan Kumar Sunkara
Pavan Kumar Sunkara

Reputation: 3025

You are using outdated code with the new express version. Please see http://github.com/visionmedia/jade for the new usage of templating system.

Upvotes: 1

Peter Lyons
Peter Lyons

Reputation: 146154

Try explicitly specifying the path to your layout file when you call render. There's an example in the express docs:

res.render('page', { layout: __dirname + '/../../mylayout.jade' });

My guess is there's different logic in express/jade depending on whether the view name is unqualified or specified as a filesystem path.

Upvotes: 0

Related Questions