Reusing jade block mixin in one template

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

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

Now I am trying to use this mixin several 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 mixture 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 expected this result:

<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

+4
source share
2 answers

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

A block is simply a "jade" block that can be replaced with 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
source

nekitk Codepen.io, , :

// 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
+1

Source: https://habr.com/ru/post/1606400/


All Articles