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

Question

我正在为客户端设计一个使用原子设计原则的网站。我正在创造一种有机体，里面可能含有不同的分子。我的问题是，这个有机体能以分子混合物作为论据吗？例如，类似这样的事情：

Molecule1

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

Molecule2

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中使用一个organism语句来确定要呈现哪个分子，在每个对象中需要一个type属性，但是您可以直接将对象传递给适当的分子混合体。

还可以使用rest参数语法 (...slides)传递未指定数量的参数。

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)