Question

我使用cocoon gem添加与作业相关联的多个日期。

我想给创建工作的人提供以下选项：

1）添加固定时间表 - ＆gt; start_date， end_date ，start_hour，end_hour

2）添加具有多个日期的灵活计划 - ＆gt; 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工作正常，只需要弄清楚如何在单击固定时添加额外的end_day字段。

Answer 1

我可以想到两个不同的选择：

两个链接

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

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

使用js回调

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

同一个Cocoon嵌套形式的不同部分

1 个答案:

两个链接

使用js回调