Passing variables through Jade templates

Question

It's possible in Jade to pass variables from one template to another?. I want to do something like this:

tmp1.jade

div.anyClass   include components/checkbox('someLabel') 

tmp2.jade

div.otherClass   div.label     {someLabel} 

Thanks!

Answer 1

Included templates inherit the variables scope of the template that included them, so what you're after will happen automatically for you.

So the following will work:

tmp1.jade

- var label = 'value' div.anyClass     include tmp2 

tmp2.jade

div.otherClass     div.label         #{label} 

You can also use mixins to pass variables, they are like functions (you define them first, then call them)

So you could do the following:

tmp1.jade

mixin labeldiv(myLabel)     div.otherClass         div.label             #{myLabel}  div.anyClass     +labelDiv("the label") 

It's worth mentioning that you can also put mixins inside includes, if you want them to be common across multiple templates. You could do this:

myMixins.jade

mixin labeldiv(myLabel)     div.otherClass         div.label             #{myLabel} 

tmp1.jade

include myMixins div.anyClass     +labelDiv("the label") 

The Jade Syntax Docs have some great (live) examples of how it all works.