将使用两个集合的 options_for_select 转换为 simple_form

Question

这是我的第一个问题，如果有任何能让我的程序员同事更轻松的提示，我将不胜感激。

背景在用于下照片广告订单的表单上，您可以 select 品牌和型号，但列出了每个型号的完整列表（糟糕的用户体验）。列出每个型号的表格代码如下。

 <div id="photo-ad-make-model-fields" class='make-model-year-selector'>
      <%= f.input :listing_known_make, label: 'Make',
                  collection: vehicle_selection.make_choices,
                  input_html: {
                      id: 'photo-ad-order-form-listing-known-make',
                      class: 'vehicle-make form-control select2 jcf-ignore',
                      data: {
                          target: 'photo-ad-order-form-listing-known-model',
                          placeholder: 'Select a make'
                      }
                  } %>
      <%= f.input :listing_known_model, label: 'Model',
                  collection: vehicle_selection.all_model_choices,
                  input_html: {
                      id: 'photo-ad-order-form-listing-known-model',
                      class: 'vehicle-model form-control select2 jcf-ignore',
                      data: {
                          placeholder: 'Select a model'
                      }
                  } %>

有一个部分用于用户搜索品牌或型号列表，它的工作方式正是我想要的。用户 select 的品牌，点击型号输入，仅列出特定型号的品牌。下面的代码

<fieldset class="make-model-selector"> <div class="form-group clearfix"> <%= select_tag :make, options_for_select(vehicle_selection.make_choices, vehicle_selection.make), include_blank: true, class: 'vehicle-make form-control select2 jcf-ignore', data: { target: 'model', placeholder: 'Any Make' } %> </div> <div class="form-group clearfix"> <%= select_tag :model, options_for_select(vehicle_selection.model_choices, vehicle_selection.model), include_blank: true, class: 'vehicle-model form-control select2 jcf-ignore', data: { placeholder: 'Any Model' } %> </div> </fieldset> 这是由 java 脚本驱动的，即特定于 rails 模型，位于每个模型视图文件夹下的视图目录中。（第一次在application.js之外处理js，这是其他公司写的遗留代码）。通过研究，我确定这是一个 rails 功能，当在 java 脚本中使用 rails 语法时，它会在 application.js 文件中失败，但特别是在模型文件夹的路径中在视图中，它会开火。（请纠正我或让我知道这个我不知道的 rails 功能）

Location of index.js files for both make and model in app heirarchy

里面的代码view/make/index.js

$('#<%= @target %>') .html('<%=j options_for_select(@makes) %>') .data('placeholder', 'Select a Make');

里面的代码view/model/index.js

$('#<%= @target %>') .html('<%=j options_for_select(@models) %>') .data('placeholder', 'Select a Model');

所以要解决我的问题，照片广告表单是 simple_form_for 生成器的一部分。所以我知道我需要将部分代码转换为简单形式，并包含本地表单变量以与保存到数据库的表单对象分开。

我的 simple_form 部分的转换版本，在其自己的部分中称为 _make_select.erb

  <fieldset class="make-model-selector">
      <div class="form-group clearfix">
          <%= f.input :listing_known_make, label: 'Make', 
                        collection: vehicle_selection.make_choices,
                        input_html: {
                        class: 'vehicle-make form-control select2 jcf-ignore', 
                        id: 'photo-ad-order-form-listing-known-make',
                        data: {
                           target: 'photo-ad-order-form-listing-known-model',
                           placeholder: 'Any Make'
                       }
                    } %>  
      </div>

      <div class ="form-group clearfix">
          <%= f.input :listing_known_model, label: 'Model', 
                      collection: vehicle_selection.model_choices, 
                      input_html: {
                      class: 'vehicle-model form-control select2 jcf-ignore', 
                      id: 'photo-ad-order-form-listing-known-model',
                       data: {
                            placeholder: 'Any Model'
                             }
                          }
                       %>   
      </div>
</fieldset>

我以部分 _form.html.erb

的形式调用此部分

<%= render partial: 'photo_ad_orders/make_select.html.erb', locals: {f: f} %>

所以这按我预期的方式工作，你 select 制造商，模型按预期过滤，我单击以保存数据库，设置了正确的目标、符号和 ID。它成功地将您的 selection 保存到数据库中。

[成功的形式selection][2]

所以现在问题

我以为我成功完成了他们希望我完成的功能，但在对该功能进行 QA 测试后，我确定当用户单击编辑按钮时 rails 呈现编辑页面。所有内容都保持原样，由活动记录提供支持，包括 Make selected。但是模型字段是空的，当您单击该字段时，我没有任何基于品牌的可用模型。用户必须单击品牌字段，select 不同的品牌(Audi) 以触发查询，返回正确的品牌(Aston Martin)，然后列出模型（DB7 等）并且用户可以 select 正确的模型。

After clicking edit, this is the issue

所以

select点击编辑时需要填写模型
至少应该已经向用户查询可用模型，因为重新渲染时会保留品牌

我相信它，因为当我转换为简单形式时，我不知道如何像 options_for_select(collection, collection)

那样包含 nil 大小写

所以我需要的是将其转换为 simple_form

的正确方法

   <%= select_tag :model, options_for_select(vehicle_selection.model_choices, vehicle_selection.model),
               include_blank: true,
               class: 'vehicle-model form-control select2 jcf-ignore',
               data: {
                   placeholder: 'Any Model'
               } %>

谁能告诉我使用 simple_form

中的两个集合转换此 options_for_select 的正确方法

我有更多图片，但由于声誉原因，Whosebug 只让我使用 2 张。

Answer 1

我认为您必须通过一个过程来进行选择，以下内容可能会有所帮助：

  f.input :listing_known_make, 
          collection: vehicle_selection.make_choices, 
          input_html: { multiple: true }, 
          selected: -> (make) { vehicle_selection.make.any? {|x| x == make} }

Answer 2

我确定我需要更改方法并为模型输入所有可用模型，并让 javascript 处理过滤。

这对我有用。

 <div class ="form-group clearfix">
          <%= f.input :listing_known_model, label: 'Model', 
                      collection: vehicle_selection.all_model_choices, 
                      input_html: {
                      class: 'vehicle-model form-control select2 jcf-ignore', 
                      id: 'photo-ad-order-form-listing-known-model',
                       data: {
                            placeholder: 'Any Model'
                             }
                          }
                       %>   
      </div>

vehicle_selection.rb

def model_choices @model_choices ||= make.present? ？ model_source.call（制作）：[] 结束

def all_model_choices @all_model_choices ||= ->{ MakeModel.models } 结束

将使用两个集合的 options_for_select 转换为 simple_form

Convert a options_for_select to simple_form that uses two collections

ruby

ruby-on-rails

simple-form

collection-select