CODEWITHSUNDEEP
node.jspug
benui
benui

Reputation: 6808

Jade Inline Conditional

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?

Upvotes: 38

Views: 37422

Answers (7)

korywka
korywka

Reputation: 7653

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

Upvotes: 1

Den
Den

Reputation: 311

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

Upvotes: 1

AA.
AA.

Reputation: 4606

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)

Upvotes: 1

Mike Causer
Mike Causer

Reputation: 8324

This also works:

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

Upvotes: 29

Luis Elizondo
Luis Elizondo

Reputation: 2069

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

Upvotes: 2

user1643747
user1643747

Reputation: 221

This works too:

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

Upvotes: 22

ctide
ctide

Reputation: 5257

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

Upvotes: 50

Related Questions