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，您可以使用以下语法：

myApp.directive('myDir', function() {
    return {
        restrict: 'E',        
        template: `<div>
                |Hello,
                |{{test}}!
                |</div>`
    };
});

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

玉内联条件

7 个答案: