multiple use of jade block mixin in one template

Question

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

Answer 1

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>

Answer 2

With credit to nekitk on Codepen.io, here's a technique that neatly sidesteps the single-block limitation:

// initialization
- blocks = {}

mixin set(key)
  - blocks[key] = this.block

// mixin definition
mixin layout
  block
  .main
    - blocks.main()
  .side
    - blocks.side()

// mixin call
+layout
  +set('main')
    p Main
  +set('side')
    p Side