Jade Inline Conditional - PullRequest
Новая
       4

Jade Inline Conditional

33 голосов
/ 27 сентября 2011

Я пытаюсь сделать так, чтобы все, кроме первого элемента в массиве, имели класс CSS, используя шаблонизатор Jade.

Я надеялся, что смогу сделать это так, но не повезло.Любые предложения? 

- 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

Есть ли лучший способ сделать это?

Ответы [ 7 ]

46 голосов
/ 27 сентября 2011

Вы можете сделать это вместо: 

- each sense, i in entry.senses
  - var klass = (i === 0 ? 'span13' : 'span13 offset3')
  div(class=klass)
    ... a tonne of subsequent stuff
25 голосов
/ 14 января 2013

Это также работает: 

div(class=(i===0 ? 'span13' : 'span13 offset3'))
20 голосов
/ 03 сентября 2012

Это тоже работает: 

div(class="#{i===0 ? 'span13' : 'span13 offset3'}")
2 голосов
/ 11 сентября 2012

Это моё решение.Я использую миксин для прохождения текущего активного пути, а в миксине я определяю полное меню и всегда передаю if, чтобы проверить, является ли путь активным путем. 

mixin adminmenu(active)
  ul.nav.nav-list.well
    li.nav-header Hello
    li(class="#{active=='/admin' ? 'active' : ''}")
      a(href="/admin") Admin
1 голос
/ 25 мая 2017

С pug 2 вы можете использовать этот синтаксис: 

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

подробнее здесь: https://pugjs.org/language/attributes.html

1 голос
/ 27 октября 2016

Я предпочитаю использовать простые функции для проверки любых сложных условий. Он работает отлично и быстро, вы не должны писать длинные строки в шаблоне. Может заменить это 

- 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 голос
/ 14 октября 2015

Вы можете использовать не только 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)
...