javascript - クラスをdivインラインに追加するジェイド条件（if/else）

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")

ここで試してみてください。

Answer 2

値がないときに class 属性を追加したくない場合は、空の文字列の代わりに undefined を割り当てることができます。これは前の例を少し変更したものです。

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

更新: また、pugを使用している場合は、さまざまな条件で必要な数の宣言を追加できるようにclass=なり、結果のクラス属性に連結されます。例えば：

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

Answer 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 で動作します。

Answer 4

pug 2 では、次の構文を使用できます。

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

詳細はこちら: https://pugjs.org/language/attributes.html