Ruby on rails 在RubyonRails中单击类别（无需刷新页面）时，如何在类别中显示音乐？

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

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

我怎样才能做到这一点？引导是否提供支持这种实现的组件

---

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

在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 %>

真do%>

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

... 您可以在此处添加删除和编辑操作

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

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

$（.category_u41;.html（“”）；

---

仅供参考，您试图做的与引导无关，除非您希望例如在引导模式上显示曲目。

下面是我突然想到的一个穷人引导示例：当您单击

曲目类别

示例时，表应展开。（您必须设置引导v4以使其工作）并且您还必须有一个

track_表

partial-您可以将相同的partial用于您想要的两个不同的表：

  <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>

曲目类别（单击展开）

以下是我的电脑上现有应用程序的外观：

---

我还需要能够在此列表上进行全文搜索。（是否可以在不刷新页面的情况下实现全文搜索？）如果您想在不刷新页面的情况下实现全文搜索，则必须使用AJAX（可能通过React、ELM等前端框架）。Bootstrap不会帮你-那只是为了造型。简而言之，要么需要编写一些JavaScript /jQuery，要么需要考虑使用前端框架。我建议你用“刷新”来实现你想要的，一旦你有了这个工作，考虑我刚才提到的替代品。@ BKSpurgeon -非常感谢你的回复！有没有可能在bootstrap中以某种树视图的形式实现这一点？因此，我首先显示了2棵折叠的树—1）类别和2）评级。当用户单击这两个方面中的任何一个时，我只是展开树以显示与该方面对应的所有轨迹的列表。这在引导中是不可能的吗？引导可以提供折叠和扩展树的功能。但是这些数据从哪里来呢？它必须来自加载页面时控制器操作的实例变量，或者必须使用AJAX/javascript/前端框架（所有内容都是相同的，顺便说一句）查询另一个控制器/操作以获取所需的数据，而不发生“刷新”。树不能在第一次加载页面时加载所有数据吗？因此，树将在第一次加载页面时加载所有数据，但它仍然会被折叠，只是不会显示数据；当用户单击树或facet名称时，树将展开并显示所有内容（当第一次访问页面时，所有内容都已加载，因此这次不需要刷新页面）。这听起来是一个合理的要求；但我以前从未在引导中处理过树。这会导致页面刷新吗？太好了！非常感谢@Catmal-我会试试这个。你答案中的第一个代码片段-如果我在application.html.erb中使用它，那么我应该把_show.html.erb和show.js.erb放在哪里？对于这些基本的问题，我深表歉意，但我对Rails和MVC本身是相当陌生的，所以请耐心地接受我！我更新了答案。我给它们命名为categories和tracks，但您应该用模型的实际名称替换它们。与我使用name属性的方式相同，但您应该用实际属性替换。不要使用application.html.erb上的第一个代码，因为您可能没有@categories可用。。

  <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>