Jade 内联条件

Question

我正在尝试使用 Jade 模板引擎使数组中除第一个元素之外的所有元素都具有 CSS 类。

我希望我能这样做，但没有运气。有什么建议吗？

- each sense, i in entry.senses
  div(class="span13 #{ if (i != 0) 'offset3' }")
    ... a tonne of subsequent stuff

我知道我可以将代码包装如下，但据我了解 Jade 的嵌套规则才能工作，我必须复制代码或将其提取到 Mixin 或其他东西中。

- each sense, i in entry.senses
  - if (i == 0)
    .span13
      ... a tonne of subsequent stuff
  - else
    .span13.offset3
      ... identical subsequent stuff

有更好的方法吗？

Answer 1

您可以这样做：

- each sense, i in entry.senses
  - var klass = (i === 0 ? 'span13' : 'span13 offset3')
  div(class=klass)
    ... a tonne of subsequent stuff

Answer 2

这也有效：

div(class=(i===0 ? 'span13' : 'span13 offset3'))

Answer 3

这也有效：

div(class="#{i===0 ? 'span13' : 'span13 offset3'}")

Answer 4

这是我的解决方案。我使用 mixin 来传递当前活动路径，并在 mixin 中定义完整的菜单，并始终传递 if 来检查该路径是否是活动路径。

mixin adminmenu(active)
  ul.nav.nav-list.well
    li.nav-header Hello
    li(class="#{active=='/admin' ? 'active' : ''}")
      a(href="/admin") Admin

Answer 5

您不仅可以使用

class

，还可以有条件地使用一堆属性：

- each sense, i in entry.senses
  - var attrs = i === 0 ? {'disabled': 'true'} : {'class': '100', 'ng-model': 'vm.model.name', 'ng-click': 'vm.click()'}
  div&attributes(attrs)

Answer 6

我更喜欢使用简单的函数来检查任何复杂的条件。 它工作完美且快速，您不应该在模板中编写长行。 可以代替这个

- each sense, i in entry.senses
  - var klass = (i === 0 ? 'span13' : 'span13 offset3')
  div(class=klass)
    ... a tonne of subsequent stuff

到此

-function resultClass(condition)
 -if (condition===0)
  -return 'span13'
 -else if (condition===1)
  -return 'span13 offset3'
 -else if (condition===2) //-any other cases can be implemented
  -return 'span13 offset3'
 -else
  -return 'span13 offset3'

- each sense, i in entry.senses
  div(class=resultClass(i))
    ... a tonne of subsequent stuff

希望它有帮助，并且这个想法很容易理解。

移动包含文件中的所有函数并在不同模板之间共享它也是一个很好的做法，但这是另一个问题

Answer 7

使用 pug 2，您可以使用以下语法：

a(href='/', class="link", class={"-active": page === 'home'}) Home page

更多信息：https://pugjs.org/language/attributes.html