Джейд условные (если/иначе), чтобы добавить класс для div, В встроенный

есть ли способ сделать это встроенным в шаблон jade?

if(typeof fromEdit != 'undefined')
   div#demo.collapse.in
else
   div#demo.collapse

хотел бы сделать эту условную проверку "inline", и результат добавит .in в конец div, если fromEdit существует.

5 60
javascript node.js iis-express pug

5 ответов:

это работает:

div#demo.collapse(class=typeof fromEdit === "undefined" ? "" : "in")

попробовать здесь.

95

Если вы не хотите, чтобы атрибут class добавлялся, когда нет значения, вы можете назначить его неопределенным вместо пустой строки. Вот предыдущий пример, слегка измененный:

div#demo.collapse(class=typeof fromEdit === "undefined" ? undefined : "in")

обновление: также, если вы используете мопс, теперь вы можете добавить столько class= объявления, как вы хотите с различными условиями, и они будут объединены в результирующий атрибут класса. например:

#demo.collapse(class=cond1 && 'class1' class=cond2 && 'class2')
75

как описано в http://jade-lang.com/reference/attributes/:

атрибут класса [...] Это также может быть сопоставление имен классов объектов с истинными или ложными значениями, что полезно для применения условных классов

задача также может быть выполнена следующим образом:

div#demo.collapse(class={ in: typeof fromEdit != 'undefined' })

хотя это не работает здесь http://naltatis.github.com/jade-syntax-docs/ (я думаю, что они должны что-то обновить), но это работает с jade@1.11.0 .

5

с мопсом 2 Вы можете использовать следующий синтаксис:

div#demo(class="collapse", class={"in": typeof fromEdit !== 'undefined'}) Home page

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

3

хотя старый вопрос, я считаю, что следующие работы, так как мопс включает в себя обнаружение существования объекта встроенный:

div#demo.collapse(class=fromEdit? 'in':undefined)

Если это не очевидно, это проверяет, является ли fromEdit существует, и если он входит in как класс, в противном случае оставляя пустой класс.

2