CODEWITHSUNDEEP
pug
Cotten
Cotten

Reputation: 9077

jade: if statements and nesting

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!

Upvotes: 17

Views: 24310

Answers (3)

Blake Basas
Blake Basas

Reputation: 89

Jade doesn't seem to have a built in solution to start and end the tags other than utilizing the 'pipe' character to render plain text.

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

Less cluttered solution -

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

Upvotes: 2

Peter Ajtai
Peter Ajtai

Reputation: 57685

I would approach this with a ternary (or fully written out conditional or method) to determine the class attribute. That allows you to keep the div on one line and keeps indentation like it would be for any other element:

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

Upvotes: 9

dertseha
dertseha

Reputation: 1086

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

Upvotes: 21

Related Questions