Escaping if / else in Jade template
So I have a simple html block in my jade template with a loop:
each dude, i in dudes
div(class='someClass')
div.otherStuff
span.someContent #{name}
I want to apply the data attribute to my topmost div when a certain loop condition is met, in this case 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
A setting like this causes display div.otherStuff div
and span.someContent
only in the else clause. I've moved tabs on these elements, but I can't get it to escape from this yet and give div.otherStuff
it to span.someContent
both the first dude and subsequent dude after that. I have also tried setting that the attr data is for the variable and trying to apply it that way, but with no success.
What I need to do to get around 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 avoid this if/else
so I don't need to duplicate div.otherStuff
and span.someContent
?
source to share
I believe the best way to do this is to use a regular mixin or mixin attribute. You can read more about it here
An example of how to do this would look something like this:
// 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 wanted to support nesting here, 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 the best thing to do for this question is to use mixin attribute
For this 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 attribute 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
source to share
You need to do:
each dude, i in dudes
div(class='someClass', data-someAttr=(i==0) ? 'first dude' : '')
div.otherstuff
span.someContent
So, if you i == 0
, Jade your display div
to data-someAttr
on 'first dude'
, and if i != 0
, Express is to make your div
to data-someAttr
set to "", but Jade is a smart guy, the attribute will not be installed even if its value is an empty string, or undefined
, or null
.
Hope it works for you.
source to share