Jade Inline Conditional

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

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

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

- 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

Надеюсь, что это поможет, и идея понятна для понимания.

Также рекомендуется переместить все функции в файл include и поделиться им между разными шаблонами, но это еще один вопрос

Ответ 7

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

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

здесь: https://pugjs.org/language/attributes.html