Search code examples
pugblockmixins

multiple use of jade block mixin in one template


I am pretty new to jade and I have the following problem. Having this (simplified) mixin:

mixin someMixin()
   .someClass 
      block first
   .otherClass 
      block second

now I try to you this mixin multiple times in one template. Like this.

+someMixin()
   block first
      div First Block of first Mixin
   block second
      div Second Block of first Mixin

+someMixin()
   block first
      div First Block of second Mixin
   block second
      div Second Block of second Mixin

as a result only the blocks of the first mixin are used. Like this

<div class="someClass">First Block of first Mixin</div>
<div class="otherClass">Second Block of first Mixin</div>

<div class="someClass">First Block of first Mixin</div>
<div class="otherClass">Second Block of first Mixin</div>

I was expecting a result like this:

<div class="someClass">First Block of first Mixin</div>
<div class="otherClass">Second Block of first Mixin</div>

<div class="someClass">First Block of second Mixin</div>
<div class="otherClass">Second Block of second Mixin</div>

What am I missing here? Thanks in advance.

Amiroo


Solution

  • From http://jade-lang.com/reference/inheritance/:

    A block is simply a "block" of Jade that may be replaced within a child template.

    If you want to use different data in mixin, use variables:

    mixin someMixin(a, b)
        div.someClass #{a}
        div.otherClass #{b}
    
    +someMixin("1-1", "1-2")
    +someMixin("2-1", "2-2")
    

    Result:

    <div class="someClass">1-1</div>
    <div class="otherClass">1-2</div>
    <div class="someClass">2-1</div>
    <div class="otherClass">2-2</div>