CODEWITHSUNDEEP
pug
Collin Estes
Collin Estes

Reputation: 5799

Escaping if/else in Jade template

So I have a simply block of html in my jade template with a loop:

  each dude, i in dudes
    div(class='someClass')
      div.otherStuff
        span.someContent #{name}

I want to apply a data attribute to my top most div when a certain looping condition is met, in this case the first dude, I set it up like this

  each dude, i in dudes
     if i == 0
       div(class='someClass, data-someAttr='first dude')
     else
       div(class='someClass')
          div.otherstuff
            span.someContent

Setup like this it causes the div.otherStuff div and the span.someContent to only display on the else condition. I've moved the tab spaces around on those items but I can't get it escape that else and give the div.otherStuff and span.someContent to both the first dude and the subsequent dudes after that. I've also tried setting that data attr to a variable and trying to apply it that way but without any success.

What I end up doing to get around it is this:

  each dude, i in dudes
     if i == 0
       div(class='someClass, data-someAttr='first dude')
          div.otherstuff
          span.someContent
     else
       div(class='someClass')
          div.otherstuff
            span.someContent

How do I escape that if/else so I dont have to duplicate the div.otherStuff and span.someContent?

Upvotes: 3

Views: 3130

Answers (2)

Mike Fielden
Mike Fielden

Reputation: 10153

I believe the best way to do this would be using a regular mixin or a mixin attribute. You can read more about it here

An example of how to do this would be something like the following:

// Passing in index
mixin makeADude(index)
  if index == 0
     div(class="someClass", data-someAttr="FIRST")
  else
     div(class="someClass")

// Usage
   each dude, i in dudes
     +makeADude(i)

If you want to support nesting here then it would look like this:

// Passing in index
    mixin makeADude(index)
      if index == 0
         div(class="someClass", data-someAttr="FIRST")
           if block
             block
      else
         div(class="someClass")
           if block
             block

// Usage
   each dude, i in dudes
     +makeADude(i)
       h1 This is embedded inside the div.someClass

I think however for this question the best thing would be to use a mixin attribute

To do that it would be very similar

// Pass nothing
mixin makeAnotherDude()
  div(class="someClass")&attributes(attributes)
    if block
      block

// Usage
  +makeAnotherDude()(data-someAttr="FIRST")
    h1 This is embedded inside the div.someClass

So in your case using the mixin attributes syntax it might look something like this:

each dude, i in dudes
  if i == 0
   +makeAnotherDude()(data-someAttr="FIRST")
     h2 Other things here perhaps
  else
   +makeAnotherDude()()
     h2 Other things here perhaps

Upvotes: 2

Waldo Jeffers
Waldo Jeffers

Reputation: 2279

You need to do :

each dude, i in dudes
   div(class='someClass', data-someAttr=(i==0) ? 'first dude' : '')
      div.otherstuff
        span.someContent

So if i == 0, Jade will render your div with data-someAttr set to 'first dude', and if i != 0, Express should render your div with data-someAttr set to "", but, Jade being the clever guy here, the attribute won't be set at all if its value is an empty string, or undefined or null.

Hope that works for you.

Upvotes: 3

Related Questions