Rails 4 - 如何将活动选项卡指定为真实条件的第一个实例

Question

我有一个叫做包的模型，它有许多属性（包资源）。我想在一组选项卡式字段中显示包的内容 - 每个选定的资源都有一个。

如果某个资源未参与项目，则视图中不会显示该资源的选项卡。

我已经设置了选项卡，以便它们仅在资源被选为 true 时才显示。具体操作如下：

<div class="dp-tab-1">
    <ul class="dp-tab-list row" id="myTab">
       <% if @project.package.has_background_ip == true %>
         <li class="col-md-2 col-xs-6 active" >
              <a href="#tab-content-first">
                 <span class="glyph-item" data-icon="&#xe043;"></span> 
              </a>
         </li>
      <% end %>
      <% if @project.package.has_data == true %>    
          <li class="col-md-2 col-xs-6">
             <a href="#tab-content-second">
                 <div class="glyph-item" data-icon="&#xe05c;"></div>
             </a>
          </li>
      <% end %>
      <% if @project.package.has_material == true %>   
          <li class="col-md-2 col-xs-6">
              <a href="#tab-content-third">
                   <div class="glyph-item" data-icon="&#xe04c;"></div>
              </a>
          </li>
      <% end %>
 </ul>

上述位的问题在于活动选项卡是在第一个选项卡中指定的。如果第一个选项卡不是必需的资源，则可以包含接下来的两个选项卡（如果需要），但第一个为 true 的选项卡将不具有 true 的指定。

如何将"活动选项卡"状态动态分配给第一个 true 条件，以便为活动选项卡显示选项卡内容。

  <div class="dp-tab-content tab-content">
                                        <div class="tab-pane row fade in active" id="tab-content-first">
                                            <% if @project.package.has_background_ip == true %>
                                                <div class="col-md-6 text-center">
                                                    <%= image_tag(@project.package.background_ip.bip_image, :class=>"wow fadeInLeft img-responsive", :alt=>"123") %>
                                                </div>

Answer 1

首先，您不必使用 == true 显式地与 true 进行比较。直行。

<% if @project.package.has_background_ip %>

其次，为什么不在帮助程序中实现一个非常简单的检查来定义哪个选项卡应该处于活动状态，然后使用该索引。助手：

# will return 1 if has_background_ip is true
# if not, will return 2 if has_data is true
# if both are false, will return 3 if has_material is true
# return -1 if all are false
def firstActiveTab 
  return case
  when @project.package.has_background_ip
     1
  when @project.package.has_data
     2
  when @project.package.has_material
     3
  else
     -1
  end
end

然后在视图 （erb） 中，如果 firstActiveTab 方法返回 1（这意味着 has_background_ip 为 true），则代码将仅为第一个选项卡添加活动类。

<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 1 %>" >
  ... first tab content for background_ip...
</li>
<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 2 %>" >
  ... second tab content for has_data...
</li>

使用 ==

1 作为第一个选项卡代码，== 2 表示第二个选项卡代码，依此类推。