Question

所以我在我的玉模板中有一个简单的html块，带有一个循环：

  each dude, i in dudes
    div(class='someClass')
      div.otherStuff
        span.someContent #{name}

我想在满足某个循环条件时将数据属性应用到我的最顶层div，在这种情况下是第一个花花公子，我将它设置为这样

  each dude, i in dudes
     if i == 0
       div(class='someClass, data-someAttr='first dude')
     else
       div(class='someClass')
          div.otherstuff
            span.someContent

这样设置会导致div.otherStuff div和span.someContent仅显示在else条件下。我已经移动了这些项目上的标签空间但是我无法让它逃脱其他的并且在此之后将div.otherStuff和span.someContent提供给第一个花花公子和随后的花花公子。我也尝试将数据attr设置为变量并尝试以这种方式应用它但没有任何成功。

我最终要做的就是：

  each dude, i in dudes
     if i == 0
       div(class='someClass, data-someAttr='first dude')
          div.otherstuff
          span.someContent
     else
       div(class='someClass')
          div.otherstuff
            span.someContent

如何逃避if/else，以便我不必复制div.otherStuff和span.someContent？

Answer 1

你需要这样做：

each dude, i in dudes
   div(class='someClass', data-someAttr=(i==0) ? 'first dude' : '')
      div.otherstuff
        span.someContent

因此，如果i == 0，Jade 将呈现div，data-someAttr设置为'first dude'，如果i != 0，快递应该呈现div，data-someAttr设置为“”，但是，Jade在这里是聪明人，属性不会设置为全部，如果其值为空字符串，或undefined或null。

希望对你有用。

Answer 2

我认为最好的方法是使用常规mixin或mixin属性。您可以阅读更多相关信息here

如何执行此操作的示例如下所示：

// Passing in index
mixin makeADude(index)
  if index == 0
     div(class="someClass", data-someAttr="FIRST")
  else
     div(class="someClass")

// Usage
   each dude, i in dudes
     +makeADude(i)

如果你想在这里支持嵌套，那么它看起来像这样：

// Passing in index
    mixin makeADude(index)
      if index == 0
         div(class="someClass", data-someAttr="FIRST")
           if block
             block
      else
         div(class="someClass")
           if block
             block

// Usage
   each dude, i in dudes
     +makeADude(i)
       h1 This is embedded inside the div.someClass

我认为，对于这个问题，最好的办法是使用mixin attribute

要做到这一点，它会非常相似

// Pass nothing
mixin makeAnotherDude()
  div(class="someClass")&attributes(attributes)
    if block
      block

// Usage
  +makeAnotherDude()(data-someAttr="FIRST")
    h1 This is embedded inside the div.someClass

因此，在您使用mixin属性语法的情况下，它可能看起来像这样：

each dude, i in dudes
  if i == 0
   +makeAnotherDude()(data-someAttr="FIRST")
     h2 Other things here perhaps
  else
   +makeAnotherDude()()
     h2 Other things here perhaps

在Jade模板中转义if / else

2 个答案: