Avoiding template code redundancy

Question

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

Answer 1

Jade supports view partials, consider pulling your common markup into one or more of those.

Answer 2

Made it with dust.js calling it like this;

<div class='frame red'>

  {#array}

    {#annex}

      {>"partials/object"/}
    {/annex}

    {>"partials/object"/}
  {/array}

</div>

<div class='frame blue'>

  {#array}

    {#annex}

      {>"partials/object"/}
    {/annex}

    {>"partials/object"/}
  {/array}

</div>

Logic in partials/object.dust;

{@select key=type}

  {@eq value=1}
    <i>{text}</i>
  [/eq}

  {@eq value=2}
    <b>{text}</b>
  {/eq}

  {@default} // when type is null
    <span>{text}{?isAnnex}, annex.{/isAnnex}</span>
  {/default}

{/select}