如何使用 ruby​​ on rails 以药丸形式显示类别中的文章

Question

我正在尝试显示一个列出文章类别的药丸表，如果选中，将仅在手风琴样式列表中显示该类别的文章。每篇文章可以有多个类别。

我的模型如下：

class Article < ActiveRecord::Base
  belongs_to :user
  has_many :article_categories
  has_many :categories, through: :article_categories
  validates :title, presence: true, length: {minimum: 3, maximum: 50}
  validates :description, presence: true, length: {minimum: 10, maximum: 300}
  validates :user_id, presence: true
end

class Category < ActiveRecord::Base
  has_many :article_categories
  has_many :articles, through: :article_categories
  validates :name, presence: true, length: { minimum: 3, maximum: 25}
  validates_uniqueness_of :name
end

class ArticleCategory < ActiveRecord::Base
  belongs_to :article
  belongs_to :category
end

我的文章控制器

class ArticlesController < ApplicationController
before_action :set_article, only: [:edit, :update, :show, :destroy]
before_action :require_user, except: [:index, :show,]
before_action :require_same_user, only: [:edit, :update, :destroy]

def index
  @articles = Article.paginate(page: params[:page], per_page: 15)
  @article_list = @articles.group_by { |t| t.categories.name }
  @categories = Category.all
end 

我的文章 index.html.erb 是

<h1 align="center">Listing all articles by Category</h1>
<div class="container">
 <div align="center">

  <h2 align="center">Find your articles below</h2>
    <ul class="col-md-offset-3 nav nav-pills">
      <% @categories.each do |category| %>
        <li><a data-toggle="pill" href="#<%= category.name %>"><%= category.name %></a></li>
      <% end %>
    </ul>
 </div>
<% @article_list.each do |category, article_items| %>
 <div class="tab-content">
  <div id="<%= category %>" class "tab-pane fade in">
   <div class="panel-group" id="accordion">
    <% article_items.each do |article_item| %>
      <div class="panel panel-default">
        <div class="panel-heading" >
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#<%= article_item.title %>">
            <%= article_item.title %></a>
          </h4>
        </div>
        <div id="<%= article_item.title %>" class="panel-collapse collapse">
          <div class="panel-body"><%=article_item.description %></div>
        </div>
      </div>
    <% end %>   
   </div>  
  </div> 
 </div>
<% end %>

</div>

这会同时显示药丸和手风琴风格，但不会链接在一起。如何确保类别药丸选项卡仅显示手风琴中的相关文章？

Answer 1

我最终稍微更改了代码以使其正常工作。我做的第一件事是使用 Categories 控制器和索引页面，而不是文章控制器和索引页面。

在我的类别控制器中，我有这个：

def index
  @categories = Category.all
end

在我的 index.html.erb 中，我将其更改为：

<h1 align="center">Listing all articles by Category</h1>
<div class="container">
  <div align="center">
      <h2 align="center">FAQ</h2>
        <ul class="col-md-offset-3 nav nav-pills">
          <% @categories.all.each do |cats| %>
            <li><a data-toggle="pill" href="#<%= cats.name %>"><%= cats.name %></a></li>
          <% end %>
        </ul>
  </div>
  <div class="tab-content">
    <% @categories.all.each do |cat| %>
      <div id="<%= cat.name %>" class="tab-pane fade">
        <div class="panel-group" id="accordion<%=cat.id%>">
          <% cat.articles.each do |article| %>
            <div class="panel panel-default">
              <div class="panel-heading" >
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion<%=cat.id%>" href="#<%= cat.name%><%= article.id %>">
                  <%= article.title %></a>
                </h4>
              </div>
              <div id="<%= cat.name%><%= article.id %>" class="panel-collapse collapse">
                <div class="panel-body"><%=article.description %></div>
              </div>
            </div>
          <% end %>
        </div> 
      </div>
    <% end %>
  </div>
</div>

这允许药丸打开该类别中所有文章的手风琴，并为每个手风琴和显示的文章提供唯一的 id，以便所有面板都能正常工作，即使可以在多个手风琴中找到某些文章。

感谢您的帮助。