web-dev-qa-db-ja.com

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

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

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>

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

pug
16
Cotten

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

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
19
dertseha

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

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

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
2
Blake Basas