Rails 4-如何将活动选项卡指定为真实条件的第一个实例 [英] Rails 4 - how to designate active tab to first instance of a true condition

问题描述

我有一个称为包的模型，该包具有许多属性(包资源).我想在一组选项卡式字段中显示软件包的内容-每个选定的资源都有一个.

I have a model called a package with a number of attributes (package resources). I want to display the content of the package in a set of tabbed fields - with one for each selected resource.

如果项目中不涉及资源，则视图中将不会显示该资源的选项卡.

If a resource is not involved in a project, then there won't be a tab for it displayed in the view.

我已经设置了选项卡，因此只有在资源被选择为true时，它们才会显示.这样做如下:

I have set up the tabs so they only display if the resource is selected as true. That is done as follows:

<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.

The problem with the bit above is that the active tab is designated inside the first tab. If the first tab is not a required resource, then the next two tabs may be included (if required) but the first of them to be true will not have the designation of true.

如何动态地将活动标签"状态分配给第一个真实条件，以便显示活动标签的标签内容.

How do I dynamically allocate 'active tab' status to the first true condition so that the tab content displays for the active tab.

  <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>

推荐答案

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

First, you don't have to compare to true explicitly using == true. Go straight.

<% if @project.package.has_background_ip %>

第二，为什么不在 helper中实施非常简单的检查定义哪个选项卡应该处于活动状态，然后使用该索引. 帮手:

Second, why not implement a very simple check in the helper to define which tab should be active and then use that index. Helper:

# 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)，则代码将仅为第一个选项卡添加活动类.

And then in the view (erb), code will add active class for first tab only, if firstActiveTab method returned 1 (which means has_background_ip is 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，依此类推.

use == 1 for first tab code, == 2 for second, etc.

这篇关于Rails 4-如何将活动选项卡指定为真实条件的第一个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！