jade: if语句和嵌套

Question

考虑这段类似伪代码的服务器端代码

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

我试着在Jade中做这件事，但是...

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

我是否搞乱了缩进？谢谢！

- Cotten

Answer 1

你需要将控制流与模板分离。请尝试以下方法：

divClass = null

if isFixed
   divClass = "fixed"

div(class=divClass)
   p inner element

这可能建议将“isFixed”参数分解为实际的divClass参数传递。但这取决于您剩余代码/模板的情况。

---

作为替代方案，尝试使用mixin：

mixin content
  p inner element

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

- dertseha

---

当然，在这种特殊情况下（class = tabClass），这正是我正在做的。但是我更普遍地询问，例如，如果在我的示例中，而不是我的<div>，假设我在if语句中有5个不同的标签和10个不同的属性，这种情况是否可能。 - Cotten

我不相信可以保留先前IF语句中的缩进级别。从主观角度来看，这可能会使事情难以跟踪和混淆。我已经更新了我的答案，采用了mixin方法，这可能更接近您的情况。 - dertseha

听起来很合理。Mixin方法看起来更加简洁。 - Cotten

您也可以直接分配行内类 div(class=(isFixed?'test':'other'))，而不需要使用mixin。 - Mike Causer

Answer 2

我会用三元运算符（或完全书写的条件语句或方法）来确定类属性。这样可以让你保持div在一行，并且像其他元素一样保持缩进：

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

- Peter Ajtai

---

我认为这是最简洁的方式。 - igneosaur

Answer 3

Jade似乎没有内置的解决方案来启动和结束标签，除了利用“pipe”字符来呈现纯文本。

- 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

- Blake Basas