Easy Client Side Repeater with jTemplates Part 3

This is the third post in “Easy Client Side Repeater with jTemplates” series. Just to recap quickly – last two posts were about:

in the first part you can find information about jTemplates plugin and an example how to build client side repeater with jQuery
second part is showing how to bind data from ASP.NET WebService with the jTemplates client side repeater

ASP.NET developers when asked about the repeater they naturally see something like this:

<asp:Repeater ID="rptSomeRepeater" runat="server">
    <HeaderTemplate></HeaderTemplate>
    <ItemTemplate></ItemTemplate>
    <AlternatingItemTemplate></AlternatingItemTemplate>
    <FooterTemplate></FooterTemplate>
</asp:Repeater>

In the previous posts I have shown how you can represent all Repeater’s templates in jTemplates. You will find there details regarding all the templates except of the one (two actually) which are needed to achieve effect like this:

Chalange here is to set different CSS class for odd and even rows. This kind of effect is easy to implement with standard server side ASP.NET Repeater by using ItemTemplate and AlternatingItemTemplate. So how it can be reproduced with jTemplates and client side repeater?

ItemTemplate and AlternatingItemTemplate with jTemplates

Here is a small modification to the code from previous parts which is doing the trick:

{#foreach $T.d as record}
<tr class="{#cycle values=['odd','even']}">
  <td><a href="{$T.record.WebSite}">{$T.record.Name}</a></td>
  <td><a href="mailto:{$T.record.Organizer.Email}">{$T.record.Organizer.Name}</a></td>
  <td>{$T.record.Venue.Name}</td>
</tr>
{#/for}

Essential part of the above example, and the only change, is this line: class=”{#cycle values=['odd','even']}”. This part makes sense because it’s within {#foreach} … {#/for} block. It works in a way that for the first item on the list jTemplates will take first item from {#cycle} values – in our case – ‘odd’. For the second item – jTemplates will take second element from the list – ‘even’. And for third it will start from the begining.

jQuery with ASP.NET