Dynamically load jade templates

Question

I'm working on a small documentation website and the content is stored in files. For instance I have two files chapter1.jade and chapter2.jade in a module1/ directory.

I'd like to read the module1/ directory and dynamically include all the chapterX.jade files in it.

I tried to have do directory = fs.readDirSync('module1/') and then in my view:

each item in directory
  include item

But jade include doesn't support dynamic values (even `include #{item}) doesn't work. Do you have any idea how I could implement this ?

EDIT: I'd like to generate some code under the each loop (anchor for easy linking) so the solution would preferabily be in the view. I could obviously manually add the anchor in the included files but it is not ideal.

Thanks

karellm · Accepted Answer · 2013-05-24T20:58:16.563

1

Here is the short version of what I've done to make it work. It uses the jade Public API.

var directory = __dirname+'/views/bla/'
  , files
  , renderedHTML = '';

if( !fs.existsSync(directory) ) {
  // directory doesn't exist, in my case I want a 404
  return res.status(404).send('404 Not found');
}

// get files in the directory
files = fs.readdirSync(directory);

files.forEach(function(file) {
  var template = jade.compile(fs.readFileSync(directory+file, 'utf8'));

  // some templating
  renderedHTML += '<section><a id="'+file+'" name="'+file+'" class="anchor">&nbsp;</a>'+template()+'</section>';
});

// render the actual view and pass it the pre rendered views
res.render('view', { 
  title: 'View',
  files: files,
  html: renderedHTML
})

And the view just renders the html variable unescaped:

div(class="component-doc-wrap")
  !{html}

edited May 24 '13 at 20:58

answered May 24 '13 at 20:33

karellm

1,843
1
20
23

mmh, not exactly. I'd just use jade myself to have some kind of cache control, I think – Ven May 24 '13 at 20:39
I'm pretty new to Express/Jade, could you give me an example? Thanks! – karellm May 24 '13 at 20:43
1

for-each-ing the array of files, then using jade.renderFile() to append it to a string, and render that string – Ven May 24 '13 at 20:44
Thanks for pointing the direction. Jade Public API changed though: http://stackoverflow.com/a/7294279/999540 jade.renderFile() is now jade.compile() – karellm May 24 '13 at 20:50

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

As @user1737909 say, that's not possible using just jade.

The best way to do this (tho) is building a little ~~Express Dynamic (view) Helpers~~

DEPECATED IN EXPRESS 3.XX

~~Check these: Jade - way to add dynamic includes~~

edited May 23 '17 at 12:13

Community

1
1

answered May 24 '13 at 09:01

jmingov

13,553
2
34
37

I did research before asking and saw this post. Though the link to the documentation is dead and it looks like dynamic helpers are a feature of the version 2. I'm using the latest Express 3. – karellm May 24 '13 at 19:11
yep, dynamic includes were removed – Ven May 24 '13 at 20:37
then we are out of luck @kalema. Edited – jmingov May 24 '13 at 20:39

Alfredo cubitos · Answer 3 · 2014-12-01T17:38:53.977

in addition to kalemas answer you can also write your includes to a file which is included in jade.

in this example I write my includes to include_all.jade. This file is included in a jade file.

If it does not work, check the path ;-)

e.g. in your app.js

var includes = "path/to/include1\n";
includes += "path/to/include2";
...
incPath = "path/to/include_all.jade";

fs.open(incPath,'w',function(err,fd){
if(err){
    throw 'error open file: ' + incPath +" "+ err;
}

var buffer = new Buffer(includes);
 fs.write(fd,buffer,0,buffer.length,null,function(err){
    if (err) 
        throw 'error writing file: ' +err;
    fs.close(fd,function(){
        console.log('file written ' + incPath);
    });
 });
});

in your jade file

include path/to/include_all.jade

Dynamically load jade templates

3 Answers3