jsRepeater - Recursion

Recursion

Image a bulletin board. A post has replies, each replies has further replies, each of those replies ... you get the idea. The problem here is that you have a hierarchy of data that might go to infinite depth. You can't create a template for each possible reply and sub-reply and sub-sub-reply, this is where recursion comes in. !{10} means, re-evaluate this template on the next level down and stop when we reached the 10th level.

Assume the following data

var data = {'replies' : 
                [{'subject' : 'Reply 1', 'replies' : 
                  [{'subject' : 'Reply 1.1', 'replies' : 
                    [{'subject' : 'Reply 1.1.1', 'replies' : 
                      [{'subject' : 'Reply 1.1.1.1', 'replies' : []}]}]}]}]};

Now, assume we want to have each level down display a different background colour (alternating) and be indented by 30px, we could use the following CSS

.odd { margin-left:30px;  background-color:#cad0d5; }
.even { margin-left:30px; background-color:#dae1e6; }

and then applying this template

<div id='list'>
    <div context='replies' class='!%{even:odd}'>
    ${subject} !{10}
    </div>
</div>

we would get

${subject} !{10}