node.js Jade 内联条件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7563647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jade Inline Conditional
提问by Ben Humphreys
I'm trying to make everything apart from the first element in an array have a CSS class using the Jade templating engine.
我正在尝试使用 Jade 模板引擎使除了数组中的第一个元素之外的所有内容都有一个 CSS 类。
I was hoping I could do it like this, but no luck. Any suggestions?
我希望我可以这样做，但没有运气。有什么建议？
- each sense, i in entry.senses
div(class="span13 #{ if (i != 0) 'offset3' }")
... a tonne of subsequent stuff
I know I could wrap the code as below, but as far as I understand Jade's nesting rules to work, I'd have to duplicate the code or extract it to a Mixin or something.
我知道我可以将代码包装如下，但据我了解 Jade 的嵌套规则可以工作，我必须复制代码或将其提取到 Mixin 或其他东西。
- each sense, i in entry.senses
- if (i == 0)
.span13
... a tonne of subsequent stuff
- else
.span13.offset3
... identical subsequent stuff
Is there a better way of doing this?
有没有更好的方法来做到这一点？
回答by ctide
You can do this instead:
你可以这样做：
- each sense, i in entry.senses
- var klass = (i === 0 ? 'span13' : 'span13 offset3')
div(class=klass)
... a tonne of subsequent stuff
回答by Mike Causer
This also works:
这也有效：
div(class=(i===0 ? 'span13' : 'span13 offset3'))
回答by user1643747
This works too:
这也有效：
div(class="#{i===0 ? 'span13' : 'span13 offset3'}")
回答by Luis Elizondo
This is my solution. I'm using a mixin to pass the current active path and in the mixin I define the complete menu and always pass an if to check if the path is the active path.
这是我的解决方案。我正在使用 mixin 来传递当前的活动路径，并在 mixin 中定义完整菜单并始终传递 if 以检查路径是否为活动路径。
mixin adminmenu(active)
ul.nav.nav-list.well
li.nav-header Hello
li(class="#{active=='/admin' ? 'active' : ''}")
a(href="/admin") Admin
回答by AA.
You can to use, not only class, but a bunch of attributes in a conditional way:
您不仅可以使用 ，还可以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)
回答by Den
I prefer to use simple functions to check any complex conditions. It's works perfect and fast, you shouldn't write long lines in template. Can replace this
我更喜欢使用简单的函数来检查任何复杂的条件。它完美而快速，你不应该在模板中写长行。可以换这个
- each sense, i in entry.senses
- var klass = (i === 0 ? 'span13' : 'span13 offset3')
div(class=klass)
... a tonne of subsequent stuff
to this
对此
-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
Hope it helps and the idea is clear to understand.
希望它有所帮助，并且这个想法很容易理解。
Also it's good practice to move all functions in include file and share it between different templates, but it's another question
移动包含文件中的所有函数并在不同模板之间共享它也是一个好习惯，但这是另一个问题
回答by bravedick
With pug 2 you can use this syntax:
使用 pug 2，您可以使用以下语法：
a(href='/', class="link", class={"-active": page === 'home'}) Home page
more here: https://pugjs.org/language/attributes.html
