5

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

3 Answers 3

3

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>
3

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
2
  • This is really useful! Adittionally, making these additional blocks optional is also useful: if blocks.main .... That way you could make mixins (i.e. components) that are usable in flexible ways
    – Remi
    May 6, 2018 at 11:49
  • Sadly this does force you to always have to set both 'main' and 'side'. If you create a second 'layout' block and add only the 'side' block then it will copy the block of the first instance (example: codepen.io/anon/pen/gzXRre?editors=1000)
    – Remi
    May 7, 2018 at 11:57
0

I came up with a solution that doesn't have the weaknesses that @Remi mentioned. https://codepen.io/Vectorjon/pen/GRmYWjN

mixin block(key, marker=false)
    - global.my_blocks = global.my_blocks || {}
    if marker
        if global.my_blocks[key]
            - let temp = {}
            - temp[key] = global.my_blocks[key]
            - global.my_blocks[key] = null
            - temp[key]()
        else
            block
    else
        - global.my_blocks[key] = this.block

Quick overview on usage:

mixin example
    block
    .part-1
        +block('one', true)
            p one's default
    .part-2
        +block('two', true)

+example
    +block('one')
        p whatever
        p you
        p want
    +block('two')
        p also
        p whatever

Hope you find it useful. Comment on my CodePen if you find any bugs or have suggestions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.