node.js - node - Jade Inline Conditional

pug express

Question

Estoy tratando de hacer que todo lo demás, aparte del primer elemento de una matriz, tenga una clase de CSS usando el motor de plantillas de Jade.

Esperaba poder hacerlo así, pero no tuve suerte. ¿Alguna sugerencia?

- each sense, i in entry.senses
  div(class="span13 #{ if (i != 0) ''offset3'' }")
    ... a tonne of subsequent stuff

Sé que podría ajustar el código de la siguiente manera, pero por lo que entiendo que las reglas de anidación de Jade funcionen, tendré que duplicar el código o extraerlo en un Mixin o algo así.

- each sense, i in entry.senses
  - if (i == 0)
    .span13
      ... a tonne of subsequent stuff
  - else
    .span13.offset3
      ... identical subsequent stuff

¿Hay una mejor manera de hacer esto?

Answer 1

Con pug 2 puedes usar esta sintaxis:

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

más aquí: https://pugjs.org/language/attributes.html

Answer 2

Esta es mi solución. Estoy usando un mixin para pasar la ruta activa actual y en la mezcla, defino el menú completo y siempre paso un si para verificar si la ruta es la ruta activa.

mixin adminmenu(active)
  ul.nav.nav-list.well
    li.nav-header Hello
    li(class="#{active==''/admin'' ? ''active'' : ''''}")
      a(href="/admin") Admin

Answer 3

Esto también funciona:

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

Answer 4

Esto también funciona:

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

Answer 5

Prefiero usar funciones simples para verificar cualquier condición compleja. Es perfecto y rápido, no debes escribir líneas largas en la plantilla. Puede reemplazar esto

- each sense, i in entry.senses
  - var klass = (i === 0 ? ''span13'' : ''span13 offset3'')
  div(class=klass)
    ... a tonne of subsequent stuff

a esto

-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

Espero que ayude y la idea es clara de entender.

También es una buena práctica mover todas las funciones en el archivo include y compartirlo entre diferentes plantillas, pero es otra pregunta

Answer 6

Puede usar, no solo la class , sino un conjunto de atributos de una manera condicional:

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

Usted puede hacer esto en su lugar:

- each sense, i in entry.senses
  - var klass = (i === 0 ? ''span13'' : ''span13 offset3'')
  div(class=klass)
    ... a tonne of subsequent stuff