Как бы вы использовали загрузочные вкладки при использовании all.each do ||функция в рельсах?

Question

У меня есть список предметов в рельсах, которые я хотел бы отобразить во вкладках, как лучше всего добиться этого в рельсах? Ниже приведен код.

<ul class="nav nav-tabs">
<% State.all.each do |state| %>
<div class="btn-group btn-group" role="group">
<%= link_to state.status, tickets_path(state: state.status), :class => "panel-heading" %>
<div class="badge">
<%= state.tickets.count %>
</div>
</div>
<% end %>

По сути, это список из примерно 8 категорий, которые один раз щелкают по фильтрам списка по категории. В настоящее время он отображается без стиля вкладки. Моя цель эти вкладки начальной загрузки .

State - это категория категории, а Status - актуальная категория

Answer 1

Вы не строите правильную структуру для вкладок.

В документации Bootstrap указано, что вы должны создать структуру, которая выглядит следующим образом:

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Структура, которую вы создаете, выглядит следующим образом:

<ul class="nav nav-tabs">
  <div class="btn-group btn-group" role="group">
    <a href="[ticket path]" class="panel-heading">[state status]</a>
    <div class="badge">[ticket count]</div>
  </div>
  <!-- more for each state -->
</ul>

То, что вы на самом деле хотите, выглядит примерно так:

<ul class="nav nav-tabs">
  <% State.all.each do |state| %>
    <li role="presentation">
      <%= link_to tickets_path(state: state.status) do %>
        <%= state.status %>
        <span class="badge"><%= state.tickets.count %></span>
      <% end %>
    </li>
  <% end %>
</ul>