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

Question

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

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

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

Answer 1

这有效：

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

尝试here。

Answer 2

如果您不希望在没有值时添加class属性，则可以将其指定为undefined而不是空字符串。这是前面的例子，略有修改：

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

更新：此外，如果您使用pug，现在可以根据需要添加尽可能多的class=声明，并且它们会在生成的类属性中连接起来。 e.g：

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

Answer 3

如http://jade-lang.com/reference/attributes/所述：

  

class属性[...]它也可以是将类名映射为true或false值的对象，这对于应用条件类很有用

任务也可以通过以下方式完成：

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

虽然它在这里不起作用http://naltatis.github.com/jade-syntax-docs/（我认为他们需要更新一些内容），但它适用于jade@1.11.0。

Answer 4

使用pug 2，您可以使用以下语法：

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

更多信息：https://pugjs.org/language/attributes.html

Answer 5

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

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

如果不明显，则会检查fromEdit是否存在以及是否确实输入了in，否则将该类留空。

Answer 6

如果您使用angularjs，则可以使用以下内容：

ng-class="{'in': typeof fromEdit !== 'undefined'}"