如何在从 ERB 部分呈现的 ActiveAdmin 编辑表单中使用选项卡答案

【问题标题】：How to use tabs in an ActiveAdmin edit form rendered from an ERB partial如何在从 ERB 部分呈现的 ActiveAdmin 编辑表单中使用选项卡
【发布时间】：2015-06-22 19:40:56
【问题描述】：

由于若干技术原因，我不得不将我一直使用的 ActiveAdmin 编辑表单更改为 ERB 部分。

表单非常庞大，我不得不将其拆分为选项卡。尝试在 ERB 部分中使用 <% tabs do %> 添加选项卡时，rails server 输出中出现以下错误：

Completed 500 Internal Server Error in 209ms

ActionView::Template::Error (undefined method `tabs' for #<#<Class:0x007fb1827cdbf8>:0x007fb181b16d60>):
    1: <%= semantic_form_for [:admin, @consignment], builder: ActiveAdmin::FormBuilder, html: { enctype: 'multipart/form-data' } do |f| %>
    2:   <% f.semantic_errors *f.object.errors.keys %>
    3:   
    4:   <% tabs do %>
    5:   
    6:     <% tab 'Foo' do %>
    7:   
  app/views/admin/consignments/_form.erb:4:in `block in _app_views_admin_consignments__form_erb__783297827544755550_70200180247600'
  app/views/admin/consignments/_form.erb:1:in `_app_views_admin_consignments__form_erb__783297827544755550_70200180247600'

我知道我可能必须在某处包含一个帮助器来呈现选项卡，但我不确定要使用哪个以及在哪里包含它。

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-4 activeadmin formtastic

【解决方案1】：

我最终通过以下方式手动输入了 HTML：

<div class="tabs">
  <ul class="nav nav-tabs" role="tablist">
    <li><a href="#consignment-details">Consignment Details</a></li>
    <li><a href="#consignment-details">Trucks</a></li>
  </ul>

  <div class="tab-content">

    <div id="consignment-details">
    </div>

    <div id="containers">
    </div>

  </div>

</div>

【讨论】：

【解决方案2】：

同样可以在form do |f|; end块中使用activeadmin语法来完成

div(class: 'tabs') do
  ul(class: 'nav nav-tabs', role: 'tablist') do
    li { link_to 'Consignment Details', '#consignment-details' }
    li { link_to 'Containers', '#containers' }
  end
  div(class: 'tab-content') do

    div(id: 'consignment-details') do
      f.inputs do #your form goes here
      #...
      end
    end

    #second tab

  end
end

【讨论】：