Jade Inline Conditional

Question

Sto cercando di rendere tutto diverso dal primo elemento di un array con una classe CSS che utilizza il motore di template di Jade.

Speravo di poterlo fare in questo modo, ma senza fortuna. Eventuali suggerimenti?

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

So che avrei potuto avvolgere il codice come sotto, ma per quanto ho capito le regole di nidificazione di Jade a lavorare, avrei dovuto duplicare il codice o estrarlo in una Mixin o qualcosa del genere.

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

C'è un modo migliore per farlo?

Answer 1

È possibile fare questo, invece:

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

Answer 2

Questo funziona troppo:

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

Answer 3

Questa è la mia soluzione. Sto usando un mixin per passare il percorso attivo corrente e nel mixin definisco il menu completo e passo sempre un se per verificare se il percorso è il percorso attivo.

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

Answer 4

Questo funziona anche:

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

Answer 5

È possibile utilizzare, non solo class, ma un gruppo di attributi in modo condizionale:

- 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

io preferisco usare le funzioni semplici per controllare eventuali condizioni complesse. Funziona perfettamente e velocemente, non si dovrebbero scrivere lunghe linee nel modello. può sostituire questo

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

a questo

-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 

Speranza che aiuta e l'idea è chiara da capire.

Inoltre è buona pratica per spostare tutte le funzioni include file e condividerlo tra diversi modelli, ma è un'altra questione

Answer 7

Con pug 2 è possibile utilizzare la seguente sintassi:

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

più

qui: https://pugjs.org/language/attributes.html