условное форматирование в частичных элементах rails
-
06-07-2019 - |
Вопрос
Я рендерю rails частично, и я хочу чередовать цвет фона при рендеринге части.Я знаю, что это не совсем понятно, поэтому вот пример того, что я хочу сделать:
Первый ряд серый фон Второй ряд желтый фон Третий ряд серый фон Четвертый ряд желтый фон- извините, что stackoverflow накладывает швы, предотвращающие отображение фоновых цветов, но я думаю, что это проясняет мою идею
Это код представления, который я использую
<table>
<%= render :partial => 'row' :collection => @rows %>
</table>
частичный файл _row.html.erb выглядит следующим образом
<tr bgcolor="#AAAAAA">
<td><%= row.name %></td>
</tr>
Проблема в том, что я не знаю, как изменить цвет фона для каждой второй строки.Есть ли способ сделать это?
Решение
Вы могли бы воспользоваться помощником по циклу.Что- то вроде этого:
<tr class="<%= cycle("even", "odd") %>">
<td><%= row.name %></td>
</tr>
Или в вашем случае используйте вместо этого bgcolor, хотя я бы рекомендовал использовать css-классы.
Вы можете циклически перебирать более двух значений:цикл (‘первый’, ‘второй’, ‘третий’, ‘and_more’).
Существует также:reset_cycle(‘имя_цикла’) Это гарантирует, что на каждой итерации вы будете начинать сначала с вашего первого значения в списке циклов.
Проверьте рельсы Документация для получения дополнительных примеров.
Другие советы
Другая идея, вы можете использовать javascript для изменения стиля элемента на основе (общее количество TD % 2).
Таким образом, весь ваш визуальный материал содержится в слое html / css / javascript.Опять же, этот метод не работает, если javascript отключен.
Есть одна "загвоздка" с циклом:Если вы должны добавить к строке, цикл прерывается.Например,
cycle('odd', 'even') << " some other classes"
разорвет порочный круг.Однако изменение порядка или построение строки работает нормально:
"some other classes " << cycle('odd', 'even')
"#{cycle('odd', 'even')} some other classes"
Я (пока) не углублялся в источник, чтобы понять, почему это может быть так.Кроме того, я использую Rails 3.2.x