Html Ruby处理带计数的拆分列无序列表的方法？

我正在尝试设计一个页面，使用RubyonRails中的Bootstrap4作为侧边栏子菜单，它需要展开/折叠，有一些要点，并包含一个计数器

所以最终它需要看起来像：

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方法来创建一个无序列表，该列表有两列，分别为collapse和count？

从设置基本数据结构开始：

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

当然，您可以向哈希结构添加更多键，以提供href、包装类和链接类等

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

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