迭代rails中的引导选项卡内容

Posted 2023-02-15

【中文标题】迭代rails中的引导选项卡内容

【英文标题】：Iterating over bootstrap tab content in rails

【发布时间】：2020-12-16 20:47:02

【问题描述】：

我正在尝试在我的 rails 应用程序中使用引导程序创建选项卡内容。我目前的实现是这样的

  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-England" role="tabpanel" aria-labelledby="v-pills-England-tab">
      <% @teams.each do | team | %>
        <% if team.team_country == "England" %>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
            <label class="form-check-label" for="<%= team.id %>">
              <%= team.short_name %>
            </label>
          </div>
        <% end %>
      <% end %>
    </div>
    <div class="tab-pane fade" id="v-pills-France" role="tabpanel" aria-labelledby="v-pills-France-tab">
      <% @teams.each do | team | %>
        <% if team.team_country == "France"%>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
            <label class="form-check-label" for="<%= team.id %>">
              <%= team.short_name %>
            </label>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>

这很有效，我在正确的国家/地区获得了预期的“团队”。问题是，代码是如此重复，我正在寻找一种让它更“干”的方法。当我尝试迭代“标签内容”类时，我没有让团队在正确的国家下。这是我尝试过的

    <div class="tab-content" id="v-pills-tabContent">
     <% @teams.each do | team | %>
      <div class="tab-pane fade show active" id="v-pills-<%= team.team_country %>" role="tabpanel" aria-labelledby="v-pills-<%= team.team_country %>-tab">
        <%= team.short_name %>
      </div>
    <% end %>
   </div>

什么是迭代选项卡内容并动态插入值的最佳方式，同时在正确的国家/地区拥有团队。

【参考方案1】：

一种选择是使用group_by 将您的数组分组到国家/地区，然后遍历这些组：

<div class="tab-content" id="v-pills-tabContent">

  <% @teams.group_by(&:team_country).each do |country, country_teams| %>
    <div class="tab-pane fade show active" id="v-pills-<%= country %>" role="tabpanel" aria-labelledby="v-pills-<%= country %>-tab">

      <% country_teams.each do | team | %>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
          <label class="form-check-label" for="<%= team.id %>">
            <%= team.short_name %>
          </label>
        </div>
      <% end %>

    </div>
  <% end %>
</div>

【讨论】：

当我在第三行添加条件“显示活跃”时，解决方案有效

【参考方案2】：

另一种方法，希望对您有所帮助

<div class="tab-content" id="v-pills-tabContent">
    <% array_options = @teams.pluck(:team_country).uniq %> <!-- get all countries !>
    <% array_options.each do |country| %>
       <div class="tab-pane fade show active" id="v-pills-<%=country%>" role="tabpanel" aria-labelledby="v-pills-<%=country%>-tab">
      <% @teams.each do | team | %>
        <% if team.team_country == <%=country%> %>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
            <label class="form-check-label" for="<%= team.id %>">
              <%= team.short_name %>
            </label>
          </div>
        <% end %>
      <% end %>
    </div>
    <% end %>
</div>

这样无论你有多少国家，它都会为每个国家创建一个标签窗格。

【讨论】：

我相信<% if team.team_country == <%=country%> %> 上你的意思是<% if team.team_country == country %>？

感谢您的回答，但效果不是特别好。我感谢您的时间和精力。干杯