Question

我对玉有新意，我有以下问题。有这个（简化）mixin：

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

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

+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

因此，仅使用第一混合的块。喜欢这个

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

我在这里缺少什么？提前谢谢。

Amiroo

Answer 1

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

块只是Jade的“块”，可以在a中替换儿童模板。

如果要在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

3 个答案: