相同 Cocoon 嵌套形式的不同部分

Question

我正在使用 cocoon gem 添加与工作相关的多个日期。

我想让创建工作的人选择：

1) 添加固定时间表 -> start_date, end_date, start_hour, end_hour

2) 添加具有多个日期的灵活时间表 -> start_date、start_hour 和 end_hour

我现在创建了选项 2，它功能齐全，他可以在其中继续添加带有相关工作时间的 start_dates。 （灵活的时间表）

现在我为固定时间表 (1) 或灵活时间表 (2) 创建了 2 个选项卡（引导程序）。

Cocoon 要求部分以特定方式命名，所以我想我不能简单地创建 2 个部分来渲染一个有结束日和一个没有结束日。

我的问题是：

如何添加 2 个不同版本的嵌套表单？ （一个带有 end_date） 如果 aria-expanded = true 显示这些字段，我可以做类似的事情吗？ erb 可以做到这一点，还是我需要使用一些 js 来完成工作？ 还是我完全错了，是否可以根据打开的引导选项卡创建 2 个不同的部分？

任何建议将不胜感激。

结构如下所示（非常简化）：

simple_form_for @vacancies
  fields for vacancies
  bootstrap-tabs flexible / fixed schedule
  flexible schedule
    simple_fields_for 
     render the partial without the end date
  fixed schedule
     ?? <- stuck here

实际代码 - 查看

  <div class="container">
    <div class="row create-form">
      <%= simple_form_for @vacancy do |f| %>
        <div class="col-xs-12 col-md-6">
          <%= f.hidden_field :recruiter_id, value: current_recruiter.id %>
          <%= f.input :name, label: false, placeholder: "job title"%>
          <%= f.input :address, label: false, placeholder: "location", input_html: {id: "user_input_autocomplete_address" } %>
          <%= f.input :description, label: false, placeholder: "description", :input_html => {:rows => 7}  %>
          <%= f.input :jobtype_id, collection: Jobtype.all, label: false, prompt: "sector"%>
          <%= f.input :jobterm_id, collection: Jobterm.all, label: false, prompt: "Contract type"%>
          <%= f.input :wage_cents, label: false, placeholder: "wage (optional)" %>
        </div>
      <div>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#fixed" role="tab" data-toggle="tab">Fixed schedule</a></li>
          <li role="presentation"><a href="#flex" role="tab" data-toggle="tab">Flexible schedule</a></li>
        </ul>

        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="fixed">
            <div class="col-xs-12 col-md-6">
              <!-- What do I do here? make new partial? Put if structure in current to see if this one is open or not? -->
            </div>
          </div>
          <div role="tabpanel" class="tab-pane" id="flex">
            <div class="col-xs-12 col-md-6">
              <%= f.simple_fields_for :vacancyschedules do |vacancyschedule| %>
                <div id="vacancyschedules">
                  <%= render "vacancyschedule_fields", f: vacancyschedule %>
                </div>
              <% end %>
              <div class="links">
                <%= link_to_add_association '', f, :vacancyschedules, class:'fa fa-plus-circle' %>
              </div>
            </div>
          </div>
        </div>
        <div class="actions">

.

          <%= f.submit %>
        </div>
      <% end %>
    </div>
  </div>

部分代码（目前没有 end_date，因为我不知道是在此处添加还是新的部分代码

<div class="nested-fields">
  <div class="inline" style="display: flex">
    <div class="field">
      <%= f.input :start_hour, as: :time, default: Time.parse('09:00')%>
    </div>
    <div class="field" style="padding-left: 20px;">
      <%= f.input :end_hour, as: :time, default: Time.parse('17:00')%>
    </div>
  </div>
  <div class="col-md-6 field date-field" style="">
    <%= f.text_field :start_date, placeholder: "start date", class: 'form-control', data: { date_format: 'YYYY/MM/DD' }, label: false, error: false  %>
  </div>
  <%= link_to_remove_association "X", f %>
</div>

可视化 - 如您所见，flex 工作正常，只需要弄清楚如何在单击 fix 时添加额外的 end_day 字段。

Answer 1

我能想到两种不同的选择：

两个链接

如果我理解正确，您有两个标签，每个标签都有自己的link_to_add_association。可以否决呈现的 partial，因此一个链接可以呈现 default 选项卡，而另一个链接可以呈现

= link_to_add_association 'add something', f, :something, partial: 'fixed_schedule_fields'

使用 js 回调

您没有使用真正的标签，而是使用假标签和单个link_to_add_association 链接，并在回调中检查哪个标签处于活动状态，并隐藏多余的字段（并可能设置一些默认值）。见documentation。