web-dev-qa-db-fra.com

Jade Inline Conditionnel

J'essaie de faire en sorte que tout sauf le premier élément d'un tableau ait une classe CSS en utilisant le moteur de création de modèles Jade.

J'espérais pouvoir le faire comme ça, mais pas de chance. Aucune suggestion?

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

Je sais que je pourrais envelopper le code comme ci-dessous, mais pour autant que je comprenne les règles d'imbrication de Jade pour fonctionner, je devrais dupliquer le code ou l'extraire dans un Mixin ou quelque chose.

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

Existe-t-il une meilleure façon de le faire?

node.jspug
35
Ben Humphreys

Vous pouvez le faire à la place:

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

Cela fonctionne également:

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

Cela fonctionne aussi:

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

C'est ma solution. J'utilise un mixin pour passer le chemin actif actuel et dans le mixin je définis le menu complet et je passe toujours un if pour vérifier si le chemin est le chemin actif.

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

Vous pouvez utiliser non seulement class, mais un tas d'attributs de manière conditionnelle:

- 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.

Je préfère utiliser des fonctions simples pour vérifier les conditions complexes. Cela fonctionne parfaitement et rapidement, vous ne devez pas écrire de longues lignes dans le modèle. Peut remplacer cela

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

pour ça

-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

J'espère que cela aide et que l'idée est claire à comprendre.

Il est également recommandé de déplacer toutes les fonctions dans le fichier d'inclusion et de le partager entre différents modèles, mais c'est une autre question

1
Den

Avec pug 2, vous pouvez utiliser cette syntaxe:

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

plus ici: https://pugjs.org/language/attributes.html

1
bravedick