Иногда мне приходится добавлять класс к элементу html в зависимости от условия. Проблема в том, что я не могу придумать чистый способ сделать это. Вот пример того, что я пробовал:
<div <%= if @status = 'success'; "class='ok'"; end %>>
some message here
</div>
ИЛИ
<% if @status == 'success' %>
<div class='success'>
<% else %>
<div>
<% end %>
some message here
</div>
Мне не нравится первый подход, потому что он многолюдный и трудный для чтения. Второй подход мне не нравится, потому что вложение лажается. Было бы неплохо поместить это в модель (что-то вроде @status.css_class
), но это не относится к ней. Что делает большинство людей?
источник
Избегая логики во взглядах
Проблема стандартного подхода состоит в том, что он требует логики в форме
if
операторов или троек в представлении. Если у вас есть несколько условных классов CSS, смешанных с классами по умолчанию, вам необходимо поместить эту логику в интерполяцию строк или тег ERB.Вот обновленный подход, который позволяет избежать какой-либо логики в представлениях:
class_string
методclass_string
Помощник принимает хэш с парами ключ / значение , состоящих из CSS строк имен классов и логических значений . Результатом метода является строка классов, в которых логическое значение оценивается как истина.Пример использования
Другие варианты использования
Этот помощник можно использовать в
ERB
тегах или с помощниками Rails, такими какlink_to
.Либо / или классы
Для случаев использования, когда потребуется тернар (например
@success ? 'good' : 'bad'
), передайте массив, где первый элемент - это класс,true
а другой - дляfalse
В духе React
Эта техника основана на надстройке, называемой
classNames
(ранее известной какclassSet
) от FacebookReact
интерфейсной среды .Использование в ваших проектах Rails
На данный момент этой
class_names
функции нет в Rails, но в этой статье показано, как добавить или реализовать ее в ваших проектах.источник
Вы также можете использовать помощник content_for, особенно если DOM находится в макете и вы хотите установить класс css в зависимости от частично загруженного.
По макету:
На частичном:
Вот и все.
источник