Jade Inline Koşullu

Question

Bir dizideki ilk öğeden her şeyi ayrı bir şekilde CSS sınıfının Jade templating motorunu kullanarak yapmaya çalışıyorum.

Bunu böyle yapabileceğimi umuyordum, ama şans yok. Baska öneri?

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

ben olarak aşağıdaki kodu sarabilirdiniz biliyorum ama bildiğim kadarıyla işe Jade'in yuvalama kurallarını anlamak gibi, kodu çoğaltmak veya mixin veya bir şeye ayıklamak gerekir.

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

Bunu yapmanın daha iyi bir yolu var mı?

Answer 1

Bunun yerine bunu yapabilirsiniz: Bu da çalışır

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

Answer 2

:

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

Answer 3

Bu benim çözümdür. Geçerli aktif yolu geçmek için bir mixin kullanıyorum ve mixin içinde tüm menüyü tanımladım ve yolun aktif yol olup olmadığını kontrol etmek için her zaman bir if geçiyorum.

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

Answer 4

Bu aynı zamanda çalışır:

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

değil Kullanılacak edebilirsiniz

Answer 5

, sadece class ama şartlı bir şekilde niteliklerin bir demet:

- 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

Ben basit işlevleri kullanmayı tercih Herhangi karmaşık koşulları kontrol etmek için. Mükemmel ve hızlı çalışıyor, şablonda uzun çizgiler yazmamalısınız. o yardımcı olur ve fikri anlamak açıktır Umut bu

-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 

bu

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

yerini alabilir.

Ayrıca dosya eklemek tüm işlevleri taşımak ve farklı şablonlar arasında paylaşmak iyi bir uygulama, ama başka bir soru

Bu sözdizimi kullanabilirsiniz boksör 2 ile

Answer 7

: Burada

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

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