Question

Concider this pseudo-ish server side code

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

I try to do this in jade but…

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

It always renders like this, with the </div> closed:

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

Am I messing up the indention?
Thanks!

Answer 1

You need to separate control flow from the template. Try this:

divClass = null

if isFixed
   divClass = "fixed"

div(class=divClass)
   p inner element

Which in turn might suggest factoring out the “isFixed” parameter into the actual divClass parameter to be passed on. But that depends on your remaining code/template of course.

---

As an alternative, try a mixin:

mixin content
  p inner element

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