web-dev-qa-db-ja.com

玉インライン条件付き

Jadeテンプレートエンジンを使用して、配列の最初の要素以外のすべてにCSSクラスを持たせようとしています。

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

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

以下のようにコードをラップできることは知っていますが、Jadeのネストルールが機能することを理解している限り、コードを複製するか、Mixinなどに抽出する必要があります。

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

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

node.jspug
33
Ben Humphreys

代わりにこれを行うことができます：

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

これも機能します：

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

これも機能します：

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

これが私の解決策です。ミックスインを使用して現在のアクティブパスを渡し、ミックスインで完全なメニューを定義し、パスがアクティブパスかどうかを確認するために常にifを渡します。

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

classだけでなく、条件付きで属性の束を使用できます。

- 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)
1
AA.

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

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

これに

-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

それが助けて、アイデアが理解しやすいことを願っています。

また、インクルードファイル内のすべての関数を移動し、異なるテンプレート間で共有することをお勧めしますが、それは別の質問です

1
Den

Pug 2では、次の構文を使用できます。

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

詳細： https://pugjs.org/language/attributes.html

1
bravedick