Jade 条件（if/else）将类添加到 div 内联答案

【问题标题】：Jade conditional (if/else) to add class to div inlineJade 条件（if/else）将类添加到 div 内联
【发布时间】：2012-12-18 03:10:05
【问题描述】：

有没有办法在玉模板中内联？

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

想要执行此条件检查“内联”，如果 fromEdit 存在，结果会将 .in 添加到 div 的末尾。

【问题讨论】：

【解决方案1】：

这行得通：

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

试试here。

【讨论】：

但如果条件为假，您甚至不希望元素具有class 属性..
对于像 a(class=tasks[i].status ? 'btn btn-success' : 'btn btn-dark', href=/turn/ ${tasks[i]._id}) 这样的对象值怎么做无法读取未定义的属性“状态”

【解决方案2】：

如果你不希望class属性在没有值的时候被添加，你可以将它赋值为undefined而不是一个空字符串。这是前面的例子，稍作修改：

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

更新：另外，如果您使用pug，您现在可以在不同的条件下添加任意数量的class= 声明，它们将在生成的类属性中连接起来。例如：

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

【讨论】：

【解决方案3】：

如 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。

【讨论】：

【解决方案4】：

对于哈巴狗 2，您可以使用以下语法：

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

【讨论】：

【解决方案5】：

虽然是一个老问题，但我发现以下工作，因为 Pug 包含内置的对象存在检测：

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

如果不是很明显，这会检查 fromEdit 是否存在，如果存在则将 in 作为类输入，否则将类留空。

【讨论】：