CODEWITHSUNDEEP
pug
John Miller
John Miller

Reputation: 265

Passing variables through Jade templates

Is it possible in Jade/Pug 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}

Upvotes: 26

Views: 25047

Answers (1)

Jed Watson
Jed Watson

Reputation: 20378

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.

Upvotes: 60

Related Questions