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

【问题标题】：multiple use of jade block mixin in one template在一个模板中多次使用jade block mixin
【发布时间】：2015-09-08 11:43:52
【问题描述】：

我对玉很陌生，我有以下问题。拥有这个（简化的）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>

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

阿米罗

【问题讨论】：

标签： pug block mixins

【解决方案1】：

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

块只是翡翠的“块”，可以在子模板。

如果你想在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>

【讨论】：

【解决方案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

【讨论】：

这真的很有用！此外，使这些附加块可选也很有用：if blocks.main ...。这样你就可以制作灵活使用的 mixin（即组件）
遗憾的是，这确实迫使您必须始终设置“主要”和“侧面”。如果您创建第二个“布局”块并仅添加“侧”块，那么它将复制第一个实例的块（例如：codepen.io/anon/pen/gzXRre?editors=1000）

【解决方案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 。

【讨论】：