将 Jade Mixins 作为参数传递给其他 Jade Mixins

Question

我正在使用 atomic design 的原则为客户设计网站。我正在创造一种可能包含不同分子的有机体。我的问题是，这个有机体可以将分子 mixin 作为参数吗？像这样的东西，例如：

分子1

mixin molecule-1(args)
  .someDiv(class= args.class)
    p= args.text

分子2

mixin molecule-2(args)
  .someOtherDiv(class= args.class)
    p= args.text
    a(href='#')= args.linkText

生物体

mixin organism(slides)

  include path/to/molecule-1.jade
  include path/to/molecule-2.jade

  .container
    each slide in slides
      slide

页数

include path/to/organism.jade
include path/to/molecule-1.jade
include path/to/organism.jade

+organism({slides:[+molecule-1({class: 'someclass', text: 'sometext'}), 
                   +molecule-2({class: 'someotherclass', text: 'sometext',
                                linkText: 'someLink'})]})

这会产生

<div class='container'>
    <div class='someDiv someclass'>
        <p>sometext</p>
    </div>
    <div class='someOtherDiv someotherclass'>
        <p>sometext</p>
        <a href='#'>someLink</a>
    </div>
</div>

或者我是否必须像这样将每个单独的属性传递给有机体：

生物体

 mixin organism(slides)

  include path/to/molecule-1.jade
  include path/to/molecule-2.jade

  .container
    each slide in slides
      if slide.type === 'molecule1'
        +molecule-1({class: slide.class, text: slide.text})
      else if slide.type === 'molecule2'
        +molecule-2({class: slide.class, text: slide.text, linkText: slide.linkText})

也就是说，有没有比后一种处理方式更优雅的解决问题的方法呢？

Answer 1

这是我要做的工作。我认为您确实需要 organism 中的 if 语句来确定要渲染的分子，并且每个对象中的 type 属性，但是您可以直接将对象传递给适当的分子混合。

您还可以使用 rest arguments syntax（...幻灯片）传入未指定数量的参数。

include path/to/molecule-1.jade
include path/to/molecule-2.jade

mixin organism(...slides)
    .container
        each slide in slides
            if slide.type == "m1"
                +molecule-1(slide)
            else if slide.type == "m2"
                +molecule-2(slide)

+organism({type:"m1", class:"class1", text:"some text"}, {type:"m2", class:"class2", text:"some more text", linkText:"Link"})

如果需要，您可以通过将分子对象拆分为变量来使 organism 调用更具可读性。

- var moleculeObj1 = {type:"m1", class:"class1", text:"some text"};
- var moleculeObj2 = {type:"m2", class:"class2", text:"some more text", linkText:"Link"};

+organism(moleculeObj1, moleculeObj2)

将 Jade Mixins 作为参数传递给其他 Jade Mixins

Passing Jade Mixins as Parameters to other Jade Mixins

pug