如何在另一个 Mixin 的 "Rest Arguments" 中传递和插入 Mixins？

Question

我正在尝试创建一个 Mixin ('proj')，其中包含任意数量的另一个 mixin（'image'、'youtubeClip'、'vimeoClip' 等... ), 作为项目 mixin 的剩余参数的一部分。

我不确定我有多接近，如果我应该使用 Blocks，或者这是否可能，但是我需要应用插值字符以便 'img' mixin 是正确对待？

这是完整的项目混合：

mixin proj(date=`051819`, name=`Project Name`, desc=`A Project Description`, linkURL, linkText, longText=`Lorem dolor, Mr. Dolemite ipsum.`, fgColor=`#ff0072`, bgColor=`#333`, ...items)
  - var projectIDString = "project-" + date;
  - var projectRevealString = "reveal-" + date;
  div(id=projectIDString, class=`projectContainer`)
    div.left
      h3.date= date
    div.right
      h3.projectTitle(data-fg=fgColor data-bg=bgColor)= name
      p.description= desc
      div(id=projectRevealString class="reveal hiddenView colorway-bg")
        div.projectButtons(class="buttongroup shownView")
          div.closeButton(class="colorway-bg colorway-type colorway-border" data-target-id="studioInfoContainer") pX
          div.infoButton(class="colorway-bg colorway-type colorway-border" data-target-id="studioInfoContainer") p?
        div.imageCollection
          each item in items
            p!= item
        div.projectDescriptionView(class="hiddenView colorway-bg colorway-type colorway-border")
          div.projectInfoButtons(class="buttongroup")
            div.closeButton(class="colorway-bg colorway-type colorway-border" data-target-id="studioInfoContainer") piX
          p.links
            a(class="colorway-bg colorway-type colorway-border" href=linkURL target="_blank")= linkText
          div.longDescText(class="colorway-bg colorway-type colorway-border")!= longText

这是一个正在创建的项目

+proj(`052218`,
  `PROJECT TITLE HERE`,
  `PROJECT SUBTITLE HERE`,
  `http://sensorymeditation.com`,
  `sensorymeditation.com`,
  `
    <p>Full length project description here...</p>
  `,
  `#706D6A`,
  `#2D2C2A`,
  `image(2, 2, 2, "non/01_USING_THE_APP.gif")`,
  `image(2, 2, 2, "non/01_USING_THE_APP.gif")`,
  `image(2, 2, 2, "non/01_USING_THE_APP.gif")`
  )

Answer 1

不会大量修改 proj 混入的解决方案是使用混入组合。

mixin bar(text)
   p= text

mixin foo(mixinName, arg)
   +#{mixinName}(arg)

+foo('bar', '2')

将使用“2”作为第一个参数调用 bar mixin。 对 mixin 的引用必须是它的字符串名称。 因此 +foo(bar, '2') 将失败。

您甚至可以调用多个不同的 mixin，如下例所示：

mixin A(text)
    a= text

mixin B(text)
    a(href='/')= text

mixin meta(heading, something, mixins, args)
    h1= heading
    p= something
    each mixin, index in mixins
        +#{mixin}(args[index])

html
    +meta('Hello', "let's try", ['A','B'], ['this', 'or that'])

会产生

<html>
<h1>Hello</h1>
<p>let's try</p><a>this</a><a href="/">or that</a>
</html>

总而言之，您可以像这样修改代码：

mixin proj(yourInitialArgs..., bgColor=`#333`, items, itemsArgs)
   ...
   div.imageCollection
       each item, index in items
           +#{item}(...itemsArgs[index])
   ...

+proj(yourArgs..., `#2D2C2A`,
  ['image','image,'image'],
  [[2,2,2,"something"],[2,2,2,"something"],[2,2,2,"something"]]
  )

来源： https://github.com/pugjs/pug/issues/2882#issuecomment-334998407

如何在另一个 Mixin 的 "Rest Arguments" 中传递和插入 Mixins？

How to pass and interpolate Mixins within the "Rest Arguments" of another Mixin?

pug