logo标签列表

Jade内联条件语句

node.jspug
37

我正在尝试使用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

有更好的方法吗？

1
顺便问一下，为什么你要为每个“if”写相同的东西？ - vsync
7个回答
48

你可以这样做：

- each sense, i in entry.senses
  - var klass = (i === 0 ? 'span13' : 'span13 offset3')
  div(class=klass)
    ... a tonne of subsequent stuff
你真是个天才。我怎么没想到呢。 - benui
别担心，我之前也碰到过这个问题，撞了几次墙才意识到我可以简单解决。 :) - ctide
如果条件为“假”，我不希望元素具有class属性，该如何解决？ - vsync
29

这也可以工作：

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

这也可以工作：

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

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

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

我更喜欢使用简单的函数来检查任何复杂的条件。这样做既完美又快速，你不应该在模板中编写长行代码。可以进行替换。

- 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

希望这有所帮助，思路清晰易懂。此外，将所有函数移动到包含文件中并在不同模板之间共享是一个不错的实践方法，但这是另一个问题。
1

您可以以条件方式使用不仅限于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)
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接