在一个模板中多次使用 jade block mixin

Question

我对 jade 还很陌生，遇到了以下问题。有了这个（简化的）mixin：

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

现在我在一个模板中多次尝试这个 mixin。像这样。

+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

因此，只使用了第一个 mixin 的块。像这样

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

我期待这样的结果：

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

我在这里错过了什么？提前致谢。

阿米罗

Answer 1

来自http://jade-lang.com/reference/inheritance/：

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

如果你想在mixin中使用不同的数据，使用变量：

mixin someMixin(a, b)
    div.someClass #{a}
    div.otherClass #{b}

+someMixin("1-1", "1-2")
+someMixin("2-1", "2-2")

结果：

<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

归功于 nekitk on 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

Answer 3

我提出了一个没有@Remi 提到的弱点的解决方案。 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

用法快速概览：

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

希望您觉得它有用。如果您发现任何错误或有任何建议，请评论我的 CodePen 。

在一个模板中多次使用 jade block mixin

multiple use of jade block mixin in one template

block

mixins

pug