我正在尝试使用 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
有没有更好的方法来做到这一点？
你可以这样做：
- each sense, i in entry.senses
- var klass = (i === 0 ? 'span13' : 'span13 offset3')
div(class=klass)
... a tonne of subsequent stuff
这也有效：
div(class=(i===0 ? 'span13' : 'span13 offset3'))
这也有效：
div(class="#{i===0 ? 'span13' : 'span13 offset3'}")
这是我的解决方案。我正在使用 mixin 来传递当前的活动路径，并且在 mixin 中我定义了完整的菜单并始终传递 if 来检查路径是否是活动路径。
mixin adminmenu(active)
ul.nav.nav-list.well
li.nav-header Hello
li(class="#{active=='/admin' ? 'active' : ''}")
a(href="/admin") Admin
您不仅可以有条件地使用，还可以使用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)
我更喜欢使用简单的函数来检查任何复杂的条件。它完美而快速，您不应该在模板中写长行。可以换这个
- 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
希望它有所帮助，并且这个想法很容易理解。
移动包含文件中的所有函数并在不同模板之间共享它也是一个好习惯，但这是另一个问题
使用 pug 2 您可以使用以下语法：
a(href='/', class="link", class={"-active": page === 'home'}) Home page