How do you use dynamics Layout with Jade and Express

Question

I'm trying to use dynamic Layout with Jade and Express. I've seen a lot of alternative, but never a way to do it cleanly.

My application will have many kinds of template including dynamiccaly other templates. And it's like my application keystone, so I can't go further without it ...

Here is an example (3 types of template) : template_1 template_2 template_3

template_1 includes template_2 and another template_3

So if it was static, I would do this :

# template.coffee
exports.index = (req, res) ->
  res.render 'template_1'

# template 1
Some HAML content

block content
  div.block
    include template_2
  div.block
    include template_3

But, I want to give the list of templates to use through a local variable :

So, I thought to do something like this

# template.coffee
exports.index = (req, res) ->
  res.render 'template_1', {
    template_list: [
      'template_2',
      'template_3'
    ]
  }

# template 1
Some HAML content

block content
  - each current_template in template_list
    div.block
      include current_template

or

# template 1
Some HAML content

block content
  - each current_template in template
    div.block
      include #{current_template}

But it does not work. It takes whatever is after include or extends as a string ...

It seems that jade are compiled before hand.

So, is it possible to make dynamic inclusions ? Or partials ? Or dynamic layouts ?

Thank you for any help.

Not possible yet. See this [thread](http://stackoverflow.com/questions/12132978/use-a-variable-in-a-jade-include) and this [issue](https://github.com/visionmedia/jade/issues/416) — mutil, Aug 02 '13 at 16:56
Thank you **mutil**. I went on [swig](http://paularmstrong.github.io/swig/docs) direction. It looks more complete for my purpose. — Juaniyyoo, Aug 05 '13 at 18:09

score 1 · Answer 1 · answered Jan 12 '15 at 22:36

Consider rendering this on the client side, using jadeify: https://github.com/domenic/jadeify, if you're also using browserify.

You could do something like the following:

var template = require("./template.jade");

document.getElementById("my-thing").innerHTML = template({
    localVar: "value",
    anotherOne: "another value"
});

How do you use dynamics Layout with Jade and Express

1 Answers1