Как отобразить музыку в категории при нажатии на категорию (без обновления страницы) в Ruby on Rails?

Question

Я создаю веб-сайт для музыкальной базы данных.

Сначала я хотел бы отобразить категории, такие как классика и хип-хоп; когда пользователь нажимает на категорию, я хотел бы отобразить названия всех дорожек в этой категории (я хотел бы сделать это без обновления страницы). Мне также нужно было бы поддерживать разбиение на страницы этого списка, отображая 10 элементов на одной странице (и мне нужно отображать кнопки для отображения, редактирования, удаления рядом с каждой дорожкой в ​​этом списке)

Как мне это сделать? Предоставляет ли начальная загрузка компоненты, поддерживающие этот вид реализации?

(Если бы я мог сделать это с обновлением страницы, я сделал бы это раньше, и я бы знал, как это сделать. Но я не уверен, как это сделать без обновления страницы)

Answer 1

Вот пример бутстрапа бедняка, который я взбил: когда вы нажмете на пример 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>

Вот как это выглядит с существующим приложением на моем компьютере:

Answer 2

По представлениям / категориям / 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")) %>");

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