玉:if语句和嵌套

Cot*_*ten 16 pug

Concider这个伪ish服务器端代码

if(isFixed) {
  <div class="fixed">
} else {
  <div>
}
    <p>Inner element</p>
  </div>
Run Code Online (Sandbox Code Playgroud)

我尝试用玉石做这个但是......

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

它总是像这样渲染,</div>关闭:

<div id="tabbar"></div><p>I want this inside of the div</p>
Run Code Online (Sandbox Code Playgroud)

我弄乱了这个凹痕吗?谢谢!

der*_*eha 19

您需要将控制流与模板分开.试试这个:

divClass = null

if isFixed
   divClass = "fixed"

div(class=divClass)
   p inner element
Run Code Online (Sandbox Code Playgroud)

这反过来可能会建议将"isFixed"参数分解为要传递的实际divClass参数.但这当然取决于你剩下的代码/模板.


作为替代方案,尝试一下mixin:

mixin content
  p inner element

if (isFixed)
  div(class="test")
    mixin content
else
  div(class="other")
    mixin content
Run Code Online (Sandbox Code Playgroud)

  • 你也可以指定类内联`div(class =(isFixed?'test':'other'))``而不需要mixin (4认同)

Pet*_*tai 9

我会用三元(或完全写出的条件或方法)来确定类属性.这允许你将div保持在一行并保持缩进,就像对任何其他元素一样:

div(class="#{ isFixed ? 'fixed' : '' }")
    p Inner Element
Run Code Online (Sandbox Code Playgroud)