Twitter Bootstrap Pills与Rails 3.2.2的集成

Question

我按照基本的Railscast教程为Rails应用程序使用Twitter Bootstrap。一切都很好，直到我必须推送到Heroku时，我遇到了一些关于pg gem的问题，然后我必须运行rake assets:precompile以使其正常推送。最终问题得到解决。

现在，我正在尝试在我的应用程序中使用 pills ，我已经从文档中进行了复制/粘贴，并更改了 href 中的 URL :)

<div class="container">
  <div class="row">

    <div class="span3">
      <p> Lorem Ipsum</p>
    </div>

    <div class="span9">    
      <ul class="nav nav-pills">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/categories">Categories</a></li>
      </ul>
    </div>

  </div>
</div>

当我点击其中一个链接时，我被重定向到正确的URL，但选定的选项没有更改为class =“active”。我不知道为什么...我以为是JavaScript的问题，但悬停属性可以正常工作...我的意思是，当鼠标悬停在一个选项上（与活动状态不同），它的样式可以正常更改。

我尝试过运行rake assets：clean命令，但没有任何变化。

谢谢。

- Daniel

---

可能是重复的问题：如何让 Twitter-Bootstrap 导航栏显示活动链接？ - maximus ツ

Answer 1

实际上，你必须自己来处理这个问题！

你的列表应该类似于

    <li class="<%= 'active' if params[:controller] == 'yourdefaultcontroller' %>"><a href="/">Home</a></li>
    <li class="<%= 'active' if params[:controller] == 'products' %>"><a href="/products">Products</a></li>
    <li class="<%= 'active' if params[:controller] == 'categories' %>"><a href="/categories">Categories</a></li>

您需要在每个请求中指定哪个选项卡是活动状态。您可以通过依赖于传递给params哈希的控制器名称（如果需要，还包括操作）来实现此目的。

- Pierre

---

请点击@user1088357旁边的复选标记来接受他的答案。这对我也行。感谢Pierre在我提出的问题中的回答。 - LearningRoR

我认为这里的想法是正确的，但直接进入params哈希表似乎是不好的。同样地，重复相同的代码也是如此。我建议至少使用current_page？方法来检查当前的控制器/操作，并且还应该将代码移动到一个helper中，以避免代码重复。 - Dustin Frazier

Answer 2

你可以使用类似这样的代码：

<li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li>
<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
<li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>

- yorch

Answer 3

我使用了一个辅助函数，以Rails表单辅助程序的方式实现了这个功能。

在一个辅助函数中（例如：app/helpers/ApplicationHelper.rb）：

def nav_bar
  content_tag(:ul, class: "nav navbar-nav") do
    yield
  end
end

def nav_link(text, path)
  options = current_page?(path) ? { class: "active" } : {}
  content_tag(:li, options) do
    link_to text, path
  end
end

然后，在一个视图中（例如app/views/layouts/application.html.erb）：

<%= nav_bar do %>
  <%= nav_link 'Home', root_path %>
  <%= nav_link 'Posts', posts_path %>
  <%= nav_link 'Users', users_path %>
<% end %>

这个例子在“用户”页面上产生的效果如下：

<ul class="nav navbar-nav">
  <li><a href="/">Home</a></li>
  <li><a href="/posts">Posts</a></li>
  <li class="active"><a href="/users">Users</a></li>
</ul>

- Daniel