Jade Inline Conditional

Question

I'm trying to make everything apart from the first element in an array have a CSS class using the Jade templating engine.

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.

- 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?

Answer 1

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

Answer 2

This also works:

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

Answer 3

This works too:

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

Answer 4

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 adminmenu(active)
  ul.nav.nav-list.well
    li.nav-header Hello
    li(class="#{active=='/admin' ? 'active' : ''}")
      a(href="/admin") Admin

Answer 5

You can to use, not only class, but a bunch of attributes in a conditional way:

- 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

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

Answer 7

With pug 2 you can use this syntax:

a(href='/', class="link", class={"-active": page === 'home'}) Home page

more here: https://pugjs.org/language/attributes.html