ジェイドインライン条件式

Question

ジェイドテンプレートエンジンを使用するCSSクラスを持つ配列の最初の要素とは別にすべてを作ろうとしています。

私はこのようにすることができると思っていましたが、運はありませんでした。助言がありますか？

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

私は以下のようにコードをラップ可能性が知っているが、限り、私は仕事にジェイドのネストのルールを理解して、私は、コードを複製したりミックスインか何かにそれを抽出する必要があると思います。

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

これを行う良い方法はありますか？

Answer 1

あなたは代わりにこれを行うことができます：これはあまりにも動作します

- 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

これは私のソリューションです。私はmixinを使って現在のアクティブなパスを渡しています。ミックスインでは、完全なメニューを定義し、常にパスをアクティブなパスかどうかを確認するために渡します。

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

Answer 4

また、これは動作します：あなたがいないだけで、使用classする

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

Answer 5

ことができますが、条件付きの方法で、属性の束：

- 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

が、私は単純な関数を使用することを好みます複雑な条件をチェックします。 これは完璧で高速ですが、テンプレートに長い行を書くべきではありません。 この

-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 

にこの

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

を置き換えることができますが、それは助け、アイデアは理解することが明らかであると思います。

また、それはファイルが含まれており、異なるテンプレート間でそれを共有するには、すべての機能を移動することをお勧めだが、それはあなたがこの構文を使用することができパグ2で別の質問

Answer 7

です：

ここ

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

より：https://pugjs.org/language/attributes.html