I'm mostly a beginner with both web development and javascript/nodejs/expressjs and I've been facing a certain problem that has been bothering me for months which i can't find a solution that isn't neither too complex or too messy; in the view i have 3 frames, and in these three frames i'll need to list a array of objects which has the same structure of data for all three but with different values and i'll need to highlight certain objects based on their values with html, at the time i'm using jade, repeating the same chain of "if ... else... case..." three times, i have tried switching to handlebars/hogan.js and filtering the data adding the specific html structure for each case before rendering but i ended up creating another mess making it rather difficult and confusing when making quick changes to the visual's of the view since i'm still at early development of the app's front-end, what would be the simplest way/method to do the task using mustache(hogan)/handlebars/jade?
Example of the redundancy i'm suffering in jade; ( there's a lot more of if... else... in the original code and also much bigger html structure )
div(class='frame red'
for object in array
if object.annex
case object.annex.type
when 1
i object.annex.text
when 2
b object.annex.text
when 3
span(class='normal') object.annex.text
else
case object.type
when 1
i object.text
when 2
b object.text
when 3
span(class='normal') object.text
div(class='frame blue')
for object in array
if object.annex
case object.annex.type
when 1
i object.annex.text
when 2
b object.annex.text
when 3
span(class='normal') object.annex.text
else
case object.type
when 1
i object.text
when 2
b object.text
when 3
span(class='normal') object.text
Jade supports view partials, consider pulling your common markup into one or more of those.