условное форматирование в партиалах рельсов - PullRequest
7 голосов
/ 04 ноября 2008

Я рендерим частичные рельсы, и я хочу чередовать цвет фона, когда он рендерит частичные. Я знаю, что это не супер ясно, поэтому вот пример того, что я хочу сделать:

Строка Один серый фон Два ряда желтый фон Ряд три серый фон Ряд Четыре желтый фон
  • извините, стеки overflowflow препятствуют отображению цветов фона, но я думаю, что это проясняет мою идею

Это код вида, который я использую

<table>
  <%= render :partial => 'row' :collection => @rows %>
</table>

часть _row.html.erb выглядит следующим образом

<tr bgcolor="#AAAAAA">
  <td><%= row.name %></td>
</tr>

Проблема в том, что я не знаю, как изменить цвет фона для каждой другой строки. Есть ли способ сделать это?

Ответы [ 3 ]

18 голосов
/ 04 ноября 2008

Вы можете использовать Cycle Helper. Примерно так:

<tr class="<%= cycle("even", "odd") %>">
  <td><%= row.name %></td>
</tr>

Или в вашем случае используйте bgcolor, хотя я бы рекомендовал использовать классы css.

Вы можете переключаться между более чем двумя значениями: цикл («первое», «второе», «третье», «и_подробнее»).

Существует также: reset_cycle (‘имя_цикла’). Это гарантирует, что на каждой итерации вы начнете снова со своего первого значения в списке циклов.

Проверьте рельсы Документация для дополнительных примеров.

0 голосов
/ 05 января 2013

Есть одна «ошибка» с циклом: если вам нужно добавить строку, цикл прерывается. Например,

cycle('odd', 'even') << " some other classes"

разорвет цикл. Тем не менее, обратный порядок или построение строки работает нормально:

"some other classes " << cycle('odd', 'even')
"#{cycle('odd', 'even')} some other classes"

Я (пока) не копался в источнике, чтобы понять, почему это так. Также я использую Rails 3.2.x

0 голосов
/ 12 мая 2009

Еще одна идея, вы можете использовать javascript для изменения стиля элемента на основе (общее количество TD% 2).

Таким образом, все ваши визуальные материалы содержатся в слое html / css / javascript. Опять же, эта техника не работает, если JavaScript отключен.

...