jsRepeater - Alternating Items

Alternating Items

One of the more usual requirements for a repeater is to be able to display alternating items differently. Let's use a list of days of the week as an example

[{"Name" : "Monday"},{"Name" : "Tuesday"} etc ... ]

To tell the repeater to display X for an odd row and Y for an even row we would use %{X:Y}. You are not limited to two options however, %{X:Y:Z} will display X in the first row, Y in the second and Z in the third and then start the sequence again from the beginning.

In the next template we switch the class of the <li> between a class named 'odd' and a class named 'even'

<ul id='Listofdays' >
    <li class='%{odd:even}'>${Name}</li>
</ul>

In the stylesheet we format the list and define a different background colour for the odd and even classes.

#Listofdays { list-style-type: none; }
#Listofdays .odd { background-color: #f0f8ff; }
#Listofdays .even { background-color: #ffffff; }

This produces the result below

${Name}

The full format of the alternating directive is %{first|X:Y|last} where the value of 'first' is sent to the document for the first item in the list, for subsequent items X and Y are alternatively sent out and the value of 'last' is written to the document in the case of the last item on the list.
If we need to put a line at the top of the first row and one at the bottom of the last row as well as alternate row colours we could use the following template.

<ul id='Listofdays2' >
    <li class='%{first|} %{odd:even} %{||last}'>${Name}</li>
</ul>

Which when matched with the CSS styles below

#Listofdays2 { list-style-type: none; }
#Listofdays2 .first { border-top:solid 1px black; }
#Listofdays2 .odd { background-color: #f0f8ff; }
#Listofdays2 .even { background-color: #ffffff; }
#Listofdays2 .last { border-bottom:solid 1px black; }

Would produce

${Name}