在Ruby on Rails中单击类别（不刷新页面）时，如何显示类别中的音乐？

Question

我正在建立一个音乐数据库网站。

我想首先显示古典和嘻哈等类别；当用户单击某个类别时，我想显示该类别中的所有曲目名称（我希望不刷新页面即可执行此操作）。我还需要支持该列表的分页，使其在一页中显示10个项目（并且我需要在该列表中的每个轨道旁边显示用于显示，编辑，删除的按钮）

我该如何完成？引导程序是否提供支持这种实现的组件？

（如果我可以通过刷新页面来做到这一点，那么我之前已经做过了，我会知道该怎么做。但是我不确定在没有刷新页面的情况下如何做到这一点）

Answer 1

在views / categories / index.html.erb上：

 <% @categories.each do |category| %>
  <%= link_to category_path(category), :remote => true do %>
   <%= category.name %>
  <% end %>
  <div class="category_<%= category.id %>">
  </div>
 <% end %>

然后创建局部视图/类别/_show.html.erb（在这里您可以插入带有引导行和列的表或结构）：

<% @category.tracks.each do |track| %>
<%= track.name %>
... and you can add here delete and edit actions

<% end %>

然后创建视图/类别/show.js.erb：

$(".category_<%= @category.id %>").html("<%= escape_javascript(render("show")) %>");

除非您想例如在引导程序模态上显示轨迹，否则您尝试执行的操作与引导程序无关。

Answer 2

这是一个穷人的引导示例，我打了个电话：当您单击Track Category示例时，表应该会展开。 （您必须设置bootstrap v4才能正常工作），并且还必须有一个track_table部分-您可以对想要的两个不同表使用相同的部分：

  <div class="track-group">
    <div class="track track-default">
      <div class="track-heading">
        <h4 class="track-title">
          <p data-toggle="collapse" href="#collapse1"> Track Category (Click to Expand)</p>
        </h4>
      </div>
      <div id="collapse1" class="track-collapse collapse">
        <div class="track-body">
          <%= render 'track-table' %>
        </div>
        <div class="track-footer">
        </div>
      </div>
    </div>
  </div>

这是我计算机上现有应用程序的外观：