Как применить «активный» класс к моей навигации на основе current_page СУХОЙ дорогой?- Рельсы 3 - PullRequest
3 голосов
/ 14 октября 2011

Итак, в моем application.html.erb моя навигационная структура выглядит примерно так:

<div id="navigation">
            <ul class="pills">
                    <% if current_page?(:controller => 'welcome', :action => 'index') %>
                        <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                        <li><%= link_to "Settings", settings_path %></li>
                        <li><%= link_to "Sign Out", signout_path %></li>
                    <% elsif !current_page?(:controller => 'welcome', :action => 'index') %>
                        <li><%= link_to "Home", root_path %></li>
                        <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                        <li><%= link_to "Settings", settings_path %></li>
                        <li><%= link_to "Sign Out", signout_path %></li>              
                    <% end %>
            </ul>
        </div>

Тем не менее, я хотел бы, чтобы, находясь на любой странице навигации, он применяет класс active к соответствующей ссылке.

Так, например, если пользователь находится на mydomain.com/johnbrown, который является ссылкой Profile, помощник rails будет выглядеть примерно так:

link_to "Profile", vanity_path(:vname => current_user.username), :class => "active".

Но как мне сделать это программным способом, чтобы я не дублировал контент? то есть как мне получить эту функциональность для всех страниц в моей навигации и написать ее как можно более СУХОЙ?

Спасибо.

Ответы [ 4 ]

6 голосов
/ 14 октября 2011

Это действительно отличный вопрос.Я никогда не был доволен решениями, которые видел или придумал.Может быть, мы можем получить один здесь.

Вот что я пробовал в прошлом

Я создал помощника, который возвращает хеш с: class, определенным, поскольку я использую HAML

def active_tab(path)
  request.path.match(/^#{path}/) ? { :class => 'active' } : {}
end

exИспользование:

= link_to "Dashboard", dashboard_path, active_tab("#{dashboard_path}$")

Или альтернатива в том же ключе

def active_class(path)
  request.path =~ /#{path}/ ? 'active' : nil
end

ex Использование:

= link_to 'Presentations', admin_presentations_path, :class => "#{active_class('presentations')}"

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

3 голосов
/ 07 марта 2014

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

Ответ взят здесь


Вы можете использовать помощник для дескриптора "current_page?", Например, метод:

module ApplicationHelper

 def is_active?(link_path)
  if current_page?(link_path)
    "active"
  else
    ""
  end
 end

end

пример начальная загрузка navbar

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Итак, на вид выглядит

<li class="<%= is_active?(some_path) %>">
<%= link_to "name path", some_path %>
</li>

Для Haml

Просто выглядит просто:

%ul.nav
  %li{class: current_page?(some_path) && 'active'}
    = link_to "About Us", some_path
0 голосов
/ 20 октября 2015

Вы можете определить вспомогательный метод в application_helper.rb

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

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

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

create_link 'xyz', any_path, который будет отображаться как

<li class="my_class">
  <a href="/any">xyz</a>
</li>

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

0 голосов
/ 14 октября 2011

Почему бы вам просто не извлечь лишние части из блока if else? Также взгляните на 'link_to_unless'

 <div id="navigation">
        <ul class="pills">

                    <li><%= link_to_unless(current_page?(:controller => 'welcome', :action => 'index'), "Home", root_path %></li>

                   <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                    <li><%= link_to "Settings", settings_path %></li>
                    <li><%= link_to "Sign Out", signout_path %></li> 
        </ul>
    </div>

тогда я бы добавил jQuery для добавления активного класса в ссылку, соответствующую шаблону window.location.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...