同一茧嵌套形式的不同部分

Question

我正在使用茧宝石添加多个日期链接到一个工作。

我想让创造就业机会的人选择：

1)增加固定时间表的-> start_date，end_date，start_hour，end_hour

2)增加一个灵活的日程安排，包括多个日期-> start_date、start_hour和end_hour

我现在创建了选项2，它是完全功能的，在这个选项中，他可以继续添加start_dates和相关的工作时间。(灵活时间表)

现在，我已经为固定计划(1)或灵活调度(2)创建了2个选项卡(引导)。

茧要求部分被命名为一种特定的方式，所以我想我不能简单地创建两个部分来呈现一个带有和一个没有结束的一天。

我的问题是：

如何添加嵌套表单的两个不同版本？(其中一个是end_date)，我能做一些类似的事情吗?如果aria= true显示这些字段，否则这些？用erb可以吗?还是我需要用一些js来完成任务？或者我完全错了，是否有可能创建两个不同的部分，根据这些部分，引导选项卡是打开的？

如有任何建议，将不胜感激。

结构如下(非常简化)：

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工作正常，只是需要弄清楚如何在单击“修复”时添加额外的end_day字段。

​

​

Answer 1

我可以想出两种不同的选择：

两个环节

如果我正确理解，您有两个选项卡，每个选项卡都有自己的link_to_add_association。可以取消呈现的部分，因此一个链接可以呈现默认选项卡，而另一个链接则是您编写的选项卡。

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

使用js回调

您没有使用真正的选项卡，而是有一个假选项卡和一个link_to_add_association链接，在回调中，您检查哪个选项卡是活动的，并隐藏多余的字段(并可能设置一些默认值)。见文档。