pug - 翡翠：ifステートメントとネスト

Question

この疑似っぽいサーバーサイドコードを検討してください

if(isFixed) {
  <div class="fixed">
} else {
  <div>
}
    <p>Inner element</p>
  </div>

私は翡翠でこれをやろうとしますが...

 - if(mode === 'fixed') {
   div#tabbar
 - }
     p ...I cannot get this to be an inner element :(

</div>閉じた状態で、常に次のようにレンダリングされます。

<div id="tabbar"></div><p>I want this inside of the div</p>

インデントを台無しにしていますか？ありがとう！

score 21 · Accepted Answer

テンプレートから制御フローを分離する必要があります。これを試して：

divClass = null

if isFixed
   divClass = "fixed"

div(class=divClass)
   p inner element

これは、「isFixed」パラメーターを実際のdivClassパラメーターに分解して渡すことを示唆している可能性があります。しかし、それはもちろん残りのコード/テンプレートに依存します。

別の方法として、ミックスインを試してください。

mixin content
  p inner element

if (isFixed)
  div(class="test")
    mixin content
else
  div(class="other")
    mixin content

score 9 · Accepted Answer

クラス属性を決定するために、ターナリ（または完全に書き出された条件またはメソッド）を使用してこれにアプローチします。これにより、divを1行に保持し、他の要素の場合と同じようにインデントを保持できます。

div(class="#{ isFixed ? 'fixed' : '' }")
    p Inner Element

score 2 · Accepted Answer

Jadeには、「パイプ」文字を使用してプレーンテキストをレンダリングする以外に、タグを開始および終了するためのソリューションが組み込まれていないようです。

- if(mode === 'fixed') {
| <div id="tabbar">
- }
| <p>I cannot get this to be an inner element :(</p>
- if(mode === 'fixed') {
| </div>
- }

雑然としたソリューション-

div(class=(isFixed) ? 'fixed' : '')
  p inner element

3 に答える 3