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

Question

我正在尝试使用 Ruby on Rails 中的 Bootstrap 4 设计一个侧边栏子菜单的页面，该子菜单需要展开/折叠、有一些要点并包含一个计数器。

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

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、包装器类和链接类等。