用计数处理拆分列无序列表的Ruby方式？答案

【问题标题】：Ruby way of handling split column unordered list with count?用计数处理拆分列无序列表的Ruby方式？
【发布时间】：2018-10-12 20:01:23
【问题描述】：

我正在尝试使用 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 方法来创建一个无序列表，该列表有两列折叠和计数？

【问题讨论】：

标签： html css ruby-on-rails

【解决方案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、包装类和链接类等。

【讨论】：