O helper cycle é legal para trabalhar com alternância de classes css em linhas de uma tabela, divs, listas e outros elementos html. Quando você deseja que as linhas pares fiquem de uma cor e as linhas ímpares fiquem de outra cor.
Por exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <table class="media-table">
<caption>Photos</caption>
<thead>
<tr>
<th class="photo">Photo</th>
<th class="description">Description</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<% if @message.photos.size > 0%>
<% for photo in @message.photos %>
<tr class="<%= cycle('even', 'odd') %>">
<td><%= image_tag photo.file.url(:thumb) %></td>
<td><%= photo.description %></td>
<td class="actions">
<%= link_to_delete message_photo_path(@message, photo) %>
</td>
</tr>
<% end %>
<% else %>
<tr>
<td colspan="3">No photos.</td>
</tr>
<% end %>
</tbody>
</table> |
E você pode ter uma regra css da seguinte forma:
1
2
3
4
5
6
| table.media-table tr.even {
}
table.media-table tr.odd {
background-color: #e5eefa;
} |
Desta forma todas as linhas ímpares ficaram de uma cor diferente.
É um helper bem simples que permite deixar suas tabelas, divs, listas e outros itens htmls bem legíveis através de regras css adequadas.
Você pode encontrar um problema de estilização quando usar o helper cycle em duas tabelas distintas conforme exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <table class="media-table">
<caption>Photos</caption>
<thead>
<tr>
<th class="photo">Photo</th>
<th class="description">Description</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<% if @message.photos.size > 0%>
<% for photo in @message.photos %>
<tr class="<%= cycle('even', 'odd') %>">
<td>< %= image_tag photo.file.url(:thumb) %></td>
<td>< %= photo.description %></td>
<td class="actions">
<%= link_to_delete message_photo_path(@message, photo) %>
</td>
</tr>
<% end %>
<% else %>
<tr>
<td colspan="3">No photos.</td>
</tr>
<% end %>
</tbody>
</table>
<br />
<br />
<table class="media-table">
<caption>Videos</caption>
<thead>
<tr>
<th class="video">Video</th>
<th class="description">Description</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<% if @message.videos.size > 0 %>
<% for video in @message.videos %>
<tr class="<%= cycle('even', 'odd') %>">
<td><%= video.file.url %></td>
<td><%= video.description %></td>
<td><%= link_to_delete message_video_path(@message, video) %></td>
</tr>
<% end %>
<% else %>
<tr>
<td colspan="3">No videos.</td>
</tr>
<% end %>
</tbody>
</table> |
No exemplo acima nós temos duas tabelas, uma para as fotos e outra para os vídeos. Nessa situação pode acontecer da próxima linha da tabela de vídeos ser pintada com a regra css odd, caso o número de linhas da tabela de fotos seja par.
Isso acontece por que o helper cycle não zera o seu contador entre um uso e outro.
Para trabalhar adequadamente você pode dar um nome para cada uso do helper cycle, desta forma:
1
2
3
4
5
| ...
<%= cycle('even', 'odd', 'row_photos') %>
...
<%= cycle('even', 'odd', 'row_videos') %>
... |
Fazendo isso cada uso do helper cycle terá o seu próprio contador, e o problema de pintar o cabeçalho da tabela não ocorre mais.
Existe uma outra opção, você pode usar o helper cycle como mencionado no primeiro exemplo, sem definir um nome para cada uso do helper cycle, entre um uso e outro do helper cycle você pode pedir para zerar o seu contador, chamando o helper reset_cycle, exemplo:
1
2
3
4
5
6
7
| ...
<%= cycle('even', 'odd') %>
...
<% reset_cycle %>
...
<%= cycle('even', 'odd') %>
... |
O helper reset_cycle também aceita zerar apenas um determinado helper cycle, basta informar o nome que você deseja zerar:
1
| <% reset_cycle("row_photos") %> |
Se você gostou desse texto e acha que ajudou você, me recomende: 
.
