Условная настройка стиля CSS из контроллера ruby

Question

Я пытаюсь динамически изменить (если на него нажали) обычный заголовок таблицы (который является ссылкой) на другой определенный класс CSS 'th.hilite'.Эта ссылка просто сортирует этот столбец, и заголовок должен подсвечиваться каждый раз, когда пользователь сортирует список.

Вид, где должен быть изменен рассматриваемый класс, выглядит следующим образом:

%table#mytable
  %thead
    %tr
      %th= link_to 'Title', mytable_path(:sort => 'title'), :id => 'title_header'

Мой вопрос прост: Как и где я мог бы динамически установить класс в% th.hilite, если щелкнуть заголовок?

Answer 1

Вы можете связать его из представления напрямую:

%th{:class => ("hilite" if @sort == "title")}= link_to 'Movie Title'...

Однако вам также придется объявить переменную экземпляра @sort в вашем контроллере и установить ее либо в title или release , в зависимости от того, по какому столбцу вы сортируете.(т.е. @sort = params[:sort])

Answer 2

Будьте осторожны, чтобы не вводить логику (даже условные) в свои представления, если вы можете найти способ обойти это.Чтобы избежать этой распространенной ошибки, вам нужно правильно использовать параметры и хеши сеансов и установить соответствующие переменные в контроллерах

# In your view
%th{:class => @title_header}= link_to 'Title', my_path(:sort => 'title'), :id => 'title_header'

# In your controller
sort = params[:sort] || session[:sort]
if sort == 'title'
  ordering = {:order => :title}
end

Answer 3

Javascript или jquery не требуется ..

Будет работать следующий HAML

%th{:class=>('title' == @sortby)?'hilite':""}= link_to  'Movie Title', movies_path(:sort => 'title'), :id => 'title_header'

Answer 4

Кстати, пока значения вашего параметра соответствуют имени столбца - не нужно кодировать каждое из них

def index
    @by=params[:by]
    @movies = Movie.order(params[:by]).all
  end

Answer 5

Вы должны использовать JavaScript для этого.Я думаю, что для вас будет хорошей идеей использовать jQuery вместо чистого JavaScript.Вот несколько примеров

http://api.jquery.com/click/

http://api.jquery.com/css/