混合中的传统包装

如何解决混合中的传统包装

mixin step(arr)
  each item in arr
    .step__item.col-md.col-sm-6
       .step__icon
          i(class=item.icon)
       .step__text=item.text

arr是一个对象数组。如果对象中定义了特定的属性，我想为.step__item添加条件包装。 我该如何在不使else语句中的整个代码加倍的情况下做到这一点：

mixin step(arr)
  each item in arr
    if item.prop !== undefined
      .wrapper
        .step__item.col-md.col-sm-6
          .step__icon
            i(class=item.icon)
          .step__text=item.text
    else
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

解决方法

这是另一个Pug mixin的好用例，可以在您的原始mixin中调用它：

mixin wrapper(condition)
  if condition
    .wrapper
      block
  else
    block

mixin step(arr)
  each item in arr
    +wrapper(item.prop !== undefined)
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

wrapper混合的内容将传递到其block语句，并且.wrapper元素仅在您通过混合作为参数传递的条件为true的任何条件下才使用。

,

是否有可能为父母设定内联条件？就像是 !item.prop ? '' : wrapper?

您可以，但是也会在else条件下添加一个包装div。

mixin step(arr)
  each item in arr
    div(class=(item.prop !== undefined ? 'wrapper': ''))
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text