Рубиновый способ обработки неупорядоченного списка с разделенным столбцом с помощью счетчика?

Question

Я пытаюсь спланировать дизайн страницы с помощью Bootstrap 4 в Ruby on Rails для подменю боковой панели, которое нужно будет развернуть / свернуть, иметь несколько точек маркера и содержать счетчик.

Так что в конечном итоге это должно выглядеть так:

Alpha             4000
 * Major One      2000
    Minor One     500
    Minor Two     1500
 * Major Two      1000

Сейчас я думаю об этом с точки зрения HTML / CSS с точки зрения неупорядоченного списка, например:

<ul>
 <li><a href="menu1" data-toggle="collapse">Major One</a></li>
  <ul class="collapse" id="menu1">
    <li>Minor One</li>
    <li>Minor Two</li>
  </ul>
 </li>
 <li>Major Two</li>
</ul>

Я понялчто мне нужно добавить какой-то счетчик в неупорядоченный список и, возможно, разбить столбцы на тегах ul li, которые я понял ... Должен быть способ Ruby для обработки этого.Есть ли более чистый, Ruby способ создания неупорядоченного списка, который состоит из двух столбцов с коллапсом и числом?

Answer 1

Начните с настройки базовой структуры данных:

@things = [
  {
    label: "Alpha",
    counter: 4000,
    children: [
      {
        label: "Major One",
        count: 2000,
        children: [
          { label: "Minor One", count: 500 },
          { label: "Minor two", count: 1500 }
        ]
      },
      {
        label: "Major One",
        count: 1500
      }
    ]
  }
]

Затем используйте частичное для рекурсивного создания списков списков:

# layouts/application.html.erb
<ul>
  <%= render partial: 'menu_item', collection: @things, as: :item, locals: { level: 1 } %>
<ul>

---

# app/views/things/_menu_item.html.erb
<li class="<%= "level-#{level} n-#{item_counter}" %>">
  <a href="#"><%= item[:label] %></a>
  <%  if item[:children] %>
  <ul class="collapse">
    <%= render partial: 'menu_item',
        collection: item[:children],
        as: :item,
        locals: { level: level + 1 }
    %>
  </ul>
  <% end %>
</li>

class: "level-#{level} n-#{item_counter}"это просто пример того, как вы можете отслеживать, на каком уровне вы находитесь, и индекс.

Вывод:

<ul>
  <li class="level-1 n-0">
    <a href="#">Alpha</a>
    <ul>
      <li class="level-2 n-0">
        <a href="#">Major One</a>
        <ul>
          <li class="level-3 n-0">
            <a href="#">Minor One</a>
          </li>
          <li class="level-3 n-1">
            <a href="#">Minor two</a>
          </li>
        </ul>
      </li>
      <li class="level-2 n-1">
        <a href="#">Major One</a>
      </li>
    </ul>
  </li>
<ul>

Конечно, вы можете добавить больше ключей к структуре хешапредоставлять href´s, классы-обертки и классы ссылок и т. д.