Question

这是我的第一个问题，所以任何有关让我的程序员更容易使用的提示，我将不胜感激。

背景在用于放置照片广告订单的表单上，您可以选择品牌和型号，但会列出每个型号的完整列表（糟糕的用户体验）。列出每个模型的表单代码如下所示。

 <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'
                      }
                  } %>

部分用于搜索品牌或型号列表的用户，它的工作方式与我希望它的工作方式完全相同。用户选择品牌，点击模型的输入，只列出特定的品牌。代码

<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功能，当在javascript中使用rails语法时，它将在application.js文件中失败，但特别是在视图中的models文件夹的路径中，它将触发。（请更正我或让我知道这个我不知道的导轨功能）

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} %>

所以这就是我期望的方式，你选择了make，模型是按预期过滤的，我点击保存数据库，设置了正确的目标，符号和id。它成功地将您的选择保存到数据库中。

[成功选择表格] [2]

现在问题

我认为我已经成功完成了他们希望我做的功能，但是在对此功能进行质量检查测试后，我确定当用户点击编辑按钮时，RENDERS编辑页面。所有内容都保留，因为它应该由活动记录提供，包括Make selected。但是模型字段为空，当您单击该字段时，我没有任何基于该模型的可用模型。用户必须单击制作字段，选择不同制作（奥迪）才能触发查询，返回正确的制作（阿斯顿马丁），然后列出模型（DB7等）和用户可以选择正确的型号。

After clicking edit, this is the issue

所以

单击编辑
至少应该已经使用可用模型查询用户，因为重新渲染时会保留make。

我相信它是因为当我转换为简单形式时，我不知道如何在options_for_select（集合，集合）中包含一个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的正确方法

我有更多的图片，但stackoverflow只让我使用2，因为声誉。

Answer 1

我认为你必须通过一个proc进行选择，下面的内容可能会有所帮助：

  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（make）：[] 端

def all_model_choices @all_model_choices || = - ＆gt; {MakeModel.models} 端

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

2 个答案: