Jade Inline Conditional

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 envolver el código como abajo, pero por lo que entiendo las reglas de anidación de Jade para trabajar, tendría que duplicar el código o extraerlo a 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 hacerlo?

Answer 1

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 

Answer 2

Esto funciona también:

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

Answer 3

Ésta 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 4

Esto también funciona:

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

Answer 5

Puede utilizar, no sólo class, pero un montón 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 6

Yo prefiero usar funciones simples para verificar cualquier condición compleja. Funciona de manera perfecta y rápida, no debe escribir líneas largas en la plantilla. puede sustituir este

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

a este

-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 ayuda y la idea es clara de entender.

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

Answer 7

con barro amasado 2 se puede utilizar esta sintaxis:

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

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