玉内联有条件的
我试图使一切从数组中的第一个元素有一个CSS类使用Jade模板引擎。
我希望能这样做，但没有运气。 有什么build议么？
- each sense, i in entry.senses div(class="span13 #{ if (i != 0) 'offset3' }") ... a tonne of subsequent stuff 我知道我可以包装代码如下，但据我了解玉的嵌套规则工作，我不得不复制代码或提取到一个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'}")
这是我的解决scheme。 我正在使用mixin来传递当前活动path，在mixin中，我定义了完整的菜单，并且总是传递一个if来检查path是否为活动path。
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
希望它有帮助，这个想法很明白。
将所有函数移动到包含文件并在不同的模板之间共享也是一个好习惯，但这是另一个问题
用帕格2，你可以使用这个语法：
a(href='/', class="link", class={"-active": page === 'home'}) Home page
更多在这里： https ： //pugjs.org/language/attributes.html
