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

我正在尝试制作一个包含任意数量的另一种mixin("image"，"youtubeClip"，"vimeoClip"等(的Mixin("proj"(，作为proj mixin的Rest Arguments的一部分。

我不确定我有多接近，我是否

应该使用块，或者这是否可能，但是我是否需要应用插值字符才能正确处理"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")`
  )

一个不会经常修改你的proj混合的解决方案是使用混合成分。

mixin bar(text)
   p= text
mixin foo(mixinName, arg)
   +#{mixinName}(arg)
+foo('bar', '2')

将调用bar mixin，并将"2"作为第一个参数。对 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

相关内容

最新更新

热门标签：