使用引导选项卡在 Rails 中动态呈现数据库记录答案

【问题标题】：Dynamically Render Database Records in Rails using Bootstrap Tabs使用引导选项卡在 Rails 中动态呈现数据库记录
【发布时间】：2017-06-21 15:53:50
【问题描述】：

我希望能够为我的每个项目任务呈现一个选项卡。目前，唯一活动的选项卡是第一个（我并不感到非常惊讶，因为我在 tabpanel div 中包含了我的 index == 0 条件，但在我的修补中，我无法选择正确的选项卡）选择时如何更改它以呈现正确的项目任务？有没有一种不使用 AJAX 来呈现这种内容的有效方法？

 <div class='well col-xs-8 col-xs-offset-2'>
  <ul class="nav nav-pills" role="tablist" id="myTabs">
    <% @project.tasks.each_with_index do |task, index| %>
        <li role="presentation" class="tab-pane <%= 'active' if index == 0 %>">
          <a href="#<% task.title %>" aria-controls="<% task.title.downcase %>"
             role="tab" data-toggle="tab"><%= task.title %></a>
        </li>
    <% end %>
  </ul>

  <div class="tab-content">
    <% @project.tasks.each_with_index do |task, index| %>
      <div role="tabpanel" class="tab-pane fade in <%= 'active' if index == 0 %>" id="<%= task.title.downcase %>">
        <p><%= task.title %></p>
      </div>
    <% end %>
  </div>

  <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" %>
  <%= javascript_include_tag "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" %>
</div>

In this case, the tab body should read 'Support'

【问题讨论】：

什么不起作用？看起来您的代码的一般形式是正确的。
@MichaelChaney 添加了一张图片以更好地说明问题；我的条件确保第一个选项卡始终呈现。如果我删除条件，每个任务的标题都将显示在视图中。我不确定的是如何确保所选选项卡是唯一呈现数据的选项卡。

标签： ruby-on-rails ajax twitter-bootstrap

【解决方案1】：

我想建议使用带有索引号的 id，如下面的代码所示，我将 id 与 rails 代码合并

下面是我根据您上面的代码创建的一些代码示例

<div class="panel with-nav-tabs panel-info">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <% @project.tasks.each_with_index do |task, index| %>
                <% if index == 0 %>
                    <li class="active"><a href="#tab<%=#{index}%>" data-toggle="tab"><p><%= task.title %></p></a></li>                       
                <% else %>
                    <li><a href="#tab<%=#{index}%>" data-toggle="tab"><%= task.title %></a></li>
                <% end %>
            <% end %>                    
        </ul>
    </div>
    <div class="panel-body">
            <div class="tab-content">
                    <% @project.tasks.each_with_index do |task, index| %>
                        <% if index == 0 %>
                            <div class="tab-pane fade in active" id="tab<%=#{index}%>">
                                <p><%= task.title %></p>
                            </div>                            
                        <% else %>
                            <div class="tab-pane fade" id="tab<%=#{index}%>">
                                <p><%= task.title %></p>
                            </div>
                        <% end %>
                    <% end %>
            </div>
    </div>

【讨论】：