Use a variable in a Jade include

Question

I'm working with Jade and Express and I would like to use a variable in my include statement. For example:

app.js

app.get('/admin', function (req, res) {
  var Admin = require('./routes/admin/app').Admin;

  res.render(Admin.view, {
    title: 'Admin',
    page: 'admin'
  });
});

layout.jade

- var templates = page + '/templates/'

include templates

When I do this I get the error EBADF, Bad file descriptor 'templates.jade'

I even tried

include #{templates}

to no avail.

I was looking for this as well. Surprised this feature hasn't been added yet. Forked the repo to look into how difficult it would be to implement this functionality. — AE Grey, Mar 22 '15 at 12:34

score 43 · Accepted Answer · answered Aug 26 '12 at 19:44

43

AFAIK JADE does not support dynamic including. What I suggest is to "include" outside the template, i.e.

app.js

app.get('/admin', function (req, res) {
    var Admin = require('./routes/admin/app').Admin;
    var page = 'admin';

    var templates = page + '/templates/';

    // render template and store the result in html variable
    res.render(templates, function(err, html) {

        res.render(Admin.view, {
            title: 'Admin',
            page: page,
            html: html
        });

    });

});

layout.jade

|!{ html }

answered Aug 26 '12 at 19:44

freakish

54,167
9
132
169

2

It seems like calling render() twice might impact performance negatively. – Steve Davis Apr 11 '13 at 13:14
@StephenDavis Yeah, but I doubt it will ever be a problem (database is always a bottleneck). – freakish Apr 11 '13 at 13:58
@freakish Indeed, but a second more is always a second later ;) – Diosney Mar 31 '14 at 13:46
+1 That being said, it the best solution for this issue I've found so far. – Diosney Mar 31 '14 at 14:08
2

Well this sucks, We shouldn't need an elaborate workaround for such a common problem. – superluminary Feb 05 '15 at 23:31

antpaw · Answer 2 · 2016-05-10T19:44:44.190

20

this also works:

//controller
var jade = require('jade');
res.render('show', {templateRender: jade.renderFile});


//template
!= templateRender('my/path/'+dynamic+'.jade', options)

This probably will not increase the performance that you would expect from using the 'view cache' setting (it's on by default in NODE_ENV === 'production'). Or even break the app (e.g. if files are not available on the hard drive while deploying new code). Also trying to use this trick in a client-side or isomorphic app will not work because the template can not be compiled.

edited May 10 '16 at 19:44

answered Oct 23 '14 at 10:03

antpaw

15,444
11
59
88

1

This is pretty awesome – Kenny Ki Dec 01 '14 at 10:33
1

But instead of calling the function with `context` it should be `locals` – Kenny Ki Dec 01 '14 at 10:52
http://jade-lang.com/api/ An options object, also used as the locals object. It's both. – antpaw Dec 01 '14 at 15:27
1

Yep that's correct. However I've tried passing `context` and it's _undefined_ while `locals` gives me access to the current context in the child template – Kenny Ki Dec 02 '14 at 02:27
Well that's more like it! – superluminary Feb 05 '15 at 23:35

Frijol · Answer 3 · 2014-03-14T00:27:42.490

Found this page googling for the same question, but in a different context, so thought I'd put my solution (read: workaround) here for posterity:

I wanted to surround my include with more context pulled from the variable, e.g. (simplified):

- var templates = page + '/templates/'
- var headid = page + 'head'
- var imgsrc = '/images/' + page
div(id=headid)    
  h1 #{page}
  img(src=imgsrc)
div(id=page)
  include templates

Since that doesn't work (Jade doesn't support dynamic includes, as noted by freakish), I hybridized with a mixin:

(Edit– a little more elegant than my previous workaround:)

mixin page1
  include page1/templates

mixin page2
  include page2/templates

...

- for (var i = 0; i < 3; i++)
  - var page = 'page' + i
  - var headid = page + 'head'
  - var imgsrc = '/images/' + page
  div(id=headid)    
    h1 #{page}
    img(src=imgsrc)
  div(id=page)
    +page

My previous answer:

mixin templates(page)
  - var headid = page + 'head'
  - var imgsrc = '/images/' + page
  div(id=headid)    
    h1 #{page}
    img(src=imgsrc)

+templates('page1')
#page1
  include page1/templates/

+templates('page2')
#page2
  include page2/templates/

...

It's not elegant, and it won't work if you need to include more than a few things this way, but at least part of the Jade is dynamic.

score 1 · Answer 4 · edited Oct 01 '15 at 17:12

1

Why do not use jade inheritance?

Render what you want at middleware level:

res.render('templates/' + template_name + '.jade')

Write common common.jade:

h1 This is a page
.container
  block sublevel
    h2 Default content

Then write file that extends common.jade:

extends common.jade
block sublevel
  h2 Some things are here

edited Oct 01 '15 at 17:12

zzzzBov

174,988
54
320
367

answered Oct 01 '15 at 17:06

user2956171

11
1

score 0 · Answer 5 · answered Apr 08 '19 at 08:18

It's 2019 and using variables in Pug (previously Jade) mixins has become simple.

When creating your mixin, you can give it parameters as per value(s) you're expecting to pass to the mixin. You can access any nested values using dot notation.

mixinFile.pug:

mixin myMixin(parameter1, parameter2, parameter3)
    h2.MyHeading #{parameter1}
    p.MyParagraph #{parameter2.myVariable}
    .MyBox(id= parameter3.id)

index.pug:

include mixinFile
block content
    +MyMixin(variable1, variable2, variable3)

You can read more in the official Pug documentation on Mixins.

Use a variable in a Jade include

5 Answers5

Linked