pug - Escaping if/else in Jade template -


so have block of html in jade template loop:

  each dude, in dudes     div(class='someclass')       div.otherstuff         span.somecontent #{name} 

i want apply data attribute top div when looping condition met, in case first dude, set this

  each dude, in dudes      if == 0        div(class='someclass, data-someattr='first dude')      else        div(class='someclass')           div.otherstuff             span.somecontent 

setup causes div.otherstuff div , span.somecontent display on else condition. i've moved tab spaces around on items can't escape else , give div.otherstuff , span.somecontent both first dude , subsequent dudes after that. i've tried setting data attr variable , trying apply way without success.

what end doing around this:

  each dude, in dudes      if == 0        div(class='someclass, data-someattr='first dude')           div.otherstuff           span.somecontent      else        div(class='someclass')           div.otherstuff             span.somecontent 

how escape if/else dont have duplicate div.otherstuff , span.somecontent?

i believe best way using regular mixin or mixin attribute. can read more here

an example of how following:

// passing in index mixin makeadude(index)   if index == 0      div(class="someclass", data-someattr="first")   else      div(class="someclass")  // usage    each dude, in dudes      +makeadude(i) 

if want support nesting here 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, in dudes      +makeadude(i)        h1 embedded inside div.someclass 

i think question best thing use mixin attribute

to similar

// pass nothing mixin makeanotherdude()   div(class="someclass")&attributes(attributes)     if block       block  // usage   +makeanotherdude()(data-someattr="first")     h1 embedded inside div.someclass 

so in case using mixin attributes syntax might this:

each dude, in dudes   if == 0    +makeanotherdude()(data-someattr="first")      h2 other things here perhaps   else    +makeanotherdude()()      h2 other things here perhaps 

Comments

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

javascript - Highcharts multi-color line -

javascript - Enter key does not work in search box -