web-dev-qa-db-ja.com

クラスをインラインdivに追加するためのJade条件（if / else）

Jaテンプレートでこのインラインを実行する方法はありますか？

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

この条件チェックを「インライン」で行いたい場合、fromEditが存在する場合、結果はdivの末尾に.inを追加します。

javascriptnode.jsexpresspug
64
jstevens13

これは動作します：

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

試してみてください こちら 。

100
Dogbert

値がないときにクラス属性を追加したくない場合は、空の文字列の代わりに未定義に割り当てることができます。以下に、少し変更した前の例を示します。

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

更新：また、 pug を使用している場合、class=宣言はさまざまな条件で必要に応じて行われ、結果のクラス属性で連結されます。例えば。：

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

http://jade-lang.com/reference/attributes/ で文書化されています：

クラス属性[...]また、クラス名をtrueまたはfalseの値にマッピングするオブジェクトにすることもできます。これは、条件付きクラスを適用するのに役立ちます

タスクは次の方法でも実行できます。

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

ここでは動作しませんが、 http://naltatis.github.com/jade-syntax-docs/ （何か更新する必要があると思います）が、[email protected]で動作します。

5
infografnet

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

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

詳細： https://pugjs.org/language/attributes.html

3
bravedick

古い質問ですが、Pugにはオブジェクトの存在検出が組み込まれているため、次のように動作します。

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

明らかでない場合、fromEditが存在するかどうかを確認し、inがクラスとして入力されているかどうかを確認します。存在しない場合は、クラスを空白のままにします。

2
Matthew Sundberg