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?

Symptomatology

btw- why do you write the same identical stuff again for each if? – Kiki

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

Lornalorne

You're a genius. How did I not think of that. – Symptomatology

Don't worry, I slammed my head into this very same problem a few times before I realized I could just get away with that. :) – Lornalorne

I don't want an element to have a class attribute if the condition is false, how should one address that? – Kiki

Answer 2

This also works:

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

Tepid

Answer 3

This works too:

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

Elsewhere

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

Aerometeorograph

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)

Deary

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

Lieb

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

Ahern