Лучший способ выделить текущую страницу в Rails 3? - применить класс css к условным ссылкам

Ответ 1

В приложении /helpers/application _helper.rb

def cp(path)
  "current" if current_page?(path)
end

В ваших представлениях:

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

В принципе напишите простую оболочку вокруг него. Кроме того, вы можете расширить этот метод, чтобы добавить дополнительные классы, добавив аргументы. Сохраняет взгляды краткими/сухими. Или, не расширив этот метод, вы могли бы просто выполнить простую интерполяцию String, чтобы добавить дополнительные классы:

<%= link_to "All Posts", posts_path, class: "#{cp(posts_path)} additional_class" %>

Ответ 2

В моем случае у меня много контроллеров с разнесением по именам, поэтому мне нравится показывать, что текущее представление также находится в Пути меню, я использовал решение Michael van Rooijen, а затем настраиваю для своего случая.

Помощник

def cp(path)
  "current" if request.url.include?(path)
end

Вид

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

Теперь, если моя панель меню/пользователи, а моя текущая страница -/users/10/post, также ссылка/пользователи установлены с "текущим" классом

Ответ 3

Я отшатнулся от Майкла и подправил помощника:

def active_class?(*paths)
  active = false
  paths.each { |path| active ||= current_page?(path) }
  active ? 'active' : nil
end

Вот как вы его используете:

<%= link_to "Bookings", bookings_path, class: active_class?(bookings_path) %>

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

<%= content_tag :li, class: active_class?(bookings_path, action: 'new') %>

И самое главное в этом случае, если условия false, он будет вставлять nil. Почему это хорошо? Ну, если вы предоставили class с помощью nil, он вообще не будет включать атрибут класса в тег. Бонус!

Ответ 4

В интересах того, что вам не нужно слишком много повторять себя, проверяя текущую страницу внутри метода link_to все время, здесь пользовательский помощник, который вы можете использовать (поместите это в app/views/helpers/application_helpers.rb

def link_to_active_class(name, active_class_names, options = {}, html_options = {}, &block)
  html_options[:class] = html_options[:class].to_s + active_class_names if current_page?(options.to_s)
  link_to name, options, html_options, &block
end

Пример использования:

<div> <%= link_to_active_class('Dashboard', 'bright_blue', dashboard_path, class: 'link_decor') </div>

если вы находитесь на http://example.com/dashboard, тогда он должен вернуться:

<div> <a href='/dashboard' class='link_decor bright_blue'>Dashboard</a> </div>

С уважением.

Ответ 5

Я бы сделал это следующим образом:

<%= link_to "Some Page", some_path, :class => current_page? ? "current" : "" %>

Ответ 6

Вариант решения Eric Boehs (самый надежный IMHO), если вы напрямую связываетесь с объектом класса (т.е. вы не показываете индекс), с добавленным помощником приложения:

def booking_link
 Booking.find(8)
end

В представлении можно использовать следующее (dd используется в контексте основания zurb)

<%= content_tag :dd, link_to(t('hints.book'), booking_link), class: active_class?(booking_path) %>-

Ответ 7

Я думаю, если бы была хорошая идея, если вы генерируете целое link_to из вашего вспомогательного метода. Зачем повторять один и тот же код (:-) DRY-принцип)

def create_link(text, path)
  class_name = current_page?(path) ? 'current' : 'any_other_class'

  link_to text, path, class: class_name
end

Теперь вы можете использовать как:

<%= create_link 'xyz', any_path %> (в представлениях), который будет отображаться как <a href="/any" class="current">xyz</a>

Надеюсь, что это поможет!

Ответ 8

Я попытался совместить пару упомянутых техник с моими собственными потребностями.

def current_page(path)
  'current' if current_page?(path)
end

def create_nav_link(string, path, method)
  link_to string, path, data: { hover: string }, method: method
end

def create_nav_item(string, path, method = nil)
  content_tag :li, create_nav_link(string, path, method), class: current_page(path)
end

В основном это позволяет использовать его следующим образом: create_nav_item("profile", profile_path), что приведет к: <li><a href="/profile" data-hover="Profile">Profile</a></li>,

или <li class="current"><a href="/profile" data-hover="Profile">Profile</a></li>, если это текущая страница.

Я не использовал request.url.include?(path), так как он также всегда будет выделять кнопку "Главная", и я не мог долго думать о работе.