Jade Inline Conditionnel

Je suis en train de faire de tout, mis à part le premier élément d'un tableau ont une classe CSS à l'aide de la Jade moteur de template.

J'espérais que je pourrais le faire comme cela, mais pas de chance. Des suggestions?

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

Je sais que je pourrais placer le code ci-dessous, mais pour autant que je comprends de Jade de nidification des règles de travail, je dois 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

Est-il une meilleure manière de faire ceci?

btw - pourquoi écrivez-vous le même genre de choses nouveau pour chaque if?

InformationsquelleAutor Ben Humphreys | 2011-09-27

node.js pug

46

Vous pouvez faire ceci à la place:
```
- each sense, i in entry.senses
  - var klass = (i === 0 ? 'span13' : 'span13 offset3')
  div(class=klass)
    ... a tonne of subsequent stuff
```
- Vous êtes un génie. Comment n'ai-je pas pensé à cela.
- Ne vous inquiétez pas, j'ai claqué ma tête dans ce même problème un peu de temps avant, j'ai réalisé que je pouvais tout simplement obtenir loin avec ça. 🙂
- +1. Si simple, je ne sais pas pourquoi je n'ai pas pensé à le faire.
- c'est une excellente solution! +1
- Je ne veux pas d'un élément pour avoir une class attribut si la condition est false, comment doit-on l'adresse de qui?
InformationsquelleAutor ctide
25

Cela fonctionne aussi:
```
div(class=(i===0 ? 'span13' : 'span13 offset3'))
```
InformationsquelleAutor Mike Causer
20

Cela marche aussi:
```
div(class="#{i===0 ? 'span13' : 'span13 offset3'}")
```
- +1, Fonctionne très bien.
InformationsquelleAutor user1643747
2

C'est ma solution. Je suis à l'aide d'un mixin à passer le courant active chemin et dans le mixin-je définir le menu complet et toujours passer 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
```
InformationsquelleAutor Luis Elizondo

Vous pouvez utiliser, non seulement class, mais un ensemble d'attributs dans un conditionnelle façon:

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

InformationsquelleAutor AA.

Je préfère utiliser des fonctions simples à vérifier toutes les conditions complexes.
Il fonctionne parfaitement et rapidement, vous ne devriez pas écrire de longues lignes dans le modèle.
Peut remplacer cette

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

à ce

-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

Espère que cela aide et l'idée est simple à comprendre.

Aussi c'est une bonne pratique pour déplacer toutes les fonctions comprennent des fichiers et de les partager entre les différents modèles, mais c'est une autre question

InformationsquelleAutor Den

1

Avec carlin 2 vous pouvez utiliser cette syntaxe:
```
a(href='/', class="link", class={"-active": page === 'home'}) Home page
```
plus ici: https://pugjs.org/language/attributes.html

InformationsquelleAutor bravedick

Vous devez vous connecter pour publier un commentaire.