Rails 5 - 使用 collection_radio_buttons 打开带有嵌套模型的部分？答案

【问题标题】：Rails 5 - use collection_radio_buttons to open a partial with nested models?Rails 5 - 使用 collection_radio_buttons 打开带有嵌套模型的部分？
【发布时间】：2018-03-03 07:11:47
【问题描述】：

（我的第一个 SO 问题，请善待！）

每个时间表只有一个系统；每个系统都有许多应用程序；每个应用程序都有许多用户和文档。

我想创建一个计划条目：

生成一个表单，首先显示多个可以单击的系统名称。单击系统时，它会打开一个列出与该系统关联的应用程序的部分。然后，当单击特定应用程序时，会打开另一个部分，其中包含与该特定应用程序关联的用户和文档。

稍后编辑此条目时，我希望能够看到我之前输入的所有内容，并且已经预先选择了正确的系统、应用程序、用户和文档。

我的问题是如何制作一个表单元素来选择一个将打开另一个部分的系统 - 稍后，当我查看和/或编辑条目时将被预先选择。

现在起作用的是<%= link_to %>，采用 Bootstrap 样式，单击时会打开其关联的应用程序部分。但是，我无法从中保存系统，也无法确定它是否可以在以后显示为已选择，例如在编辑表单中。

我们正在尝试使用单选按钮（因为您不能预先选择链接到，对吗？），所以我一直在用f.collection_radio_buttons 将意大利面扔到墙上，或者迭代f.radio_button，或<input type="radio"> 的标签。但是，我不知道如何使单选按钮部分打开。

自从第一次发布这个问题以来，我已经缩小到在循环中使用f.radio_button。在稍后编辑条目时查看时，它显示为正确“已检查”，但仍无法打开部分。

这是来自/_schedule_form.html.erb的sn-p：

<%= form_for @schedule do |f| %>

  <% System.all.each do |a| %>

   <!-- This link_to makes the Applications partial appear, but that's all it does -->
    <%= link_to a.system_nm, system_applications_path(:system_id => a.id, 
    :schedule_id => params['id']), :title => 'Click to choose system', 
    :class -> 'btn btn-default btn-flat active', data: {:remote => true, 
    'data-target' => '#applicationList'} %>
     </a>  <!-- closes the link_to tag, I believe -->
    <% end %>

      <div id="applicationList">
         <!-- the Applications partial renders here -->
      </div>

   <% end %>

这是打开_system_applications.html.erb部分的system_applications.js.erb文件：

$("#applicationList").html("<%= escape_javascript(render 
    'system_applications', locals: {applications: @applications, 
    schedule_applications_array: @schedule_applications_array})%>");

以下是可能提供线索的更新： 我现在正在使用这个嵌入式 Ruby 代码：

<% System.all.each do |rt| %>
  <label>
    <%= f.radio_button :system_id, rt.id, data:{:remote => true, 'data-target' => 
   '@applicationList'}, href: system_applications_path(:system_id => rt.id, 
   :schedule_id => params['id']), class: 'remote-input', onclick: 
   "#applicationsList" %>
  </label>
<% end %>

而且，当我单击该单选按钮时，我在浏览器控制台 Uncaught SyntaxError: Invalid or Unexpected Token 中收到一个 JS 错误，它指向呈现的 HTML，特别是行尾的 >：

<input data-remote="true" data-data-target="#applicationList" href="/schedules/system_applications/24?schedule_id=122" class="remote-input" onclick="#applicationList" type="radio" value="24" checked="checked" name="schedule[system_id]" id="schedule_system_id_24" />

只是为了让它更复杂： 创建新条目时，当我将鼠标悬停在link_to 按钮之一上时，我会得到一个看起来很干净的路径，例如/schedules/system_applications/24，这就是单击时发送到服务器的内容（然后将参数读取为@987654337 @. 但是将鼠标悬停在f.radio_button 标签上不会显示路径，单击它会发送带有参数{"schedule"=>{"system_id"=>"24"}} 的"/schedules/new?schedule%5Bsystem_id%5D=24"。这会触发500 (Internal Server Error)（这是有道理的，因为该URL 没有路径）。参数是否需要相同？如果是，我怎么搞砸了？

另外，单击单选按钮将请求发送到SchedulesController#new，同时单击link_to 将请求发送到SchedulesController#system_applications。我不明白我是如何告诉单选按钮将其发送到#new。

我现在卡住的地方是，f.radio_button 呈现为“已检查”，这是正确的；但它不会打开部分。 link_to 版本会打开部分，但我认为它不能在稍后呈现为“已检查”。

如果我问的不够清楚，请告诉我。

【问题讨论】：

标签： radio-button ruby-on-rails-5 unobtrusive-javascript collection-select

【解决方案1】：

我认为我们成功了。一个关键的变化是使用url 而不是href 来将system_applications_path 用于控制器，如下所示：

<% @systems.each do |a|
  <label class="btn btn-sm btn-default">
    <%= f.radio_button :system_id, a.id, :data => {url:system_applications_path(:system_id 
    => a.id, :schedule_id => params['id']), 'data-target' => '#applicationList'+a.id.to_s,
    :remote => true} %>
    <%= a.system_nm %>
  </label>
<% end %>

现在，当我单击单选按钮时，它会打开正确的部分，并且稍后在我去编辑条目时显示为选中状态。 Bootstrap 样式 (btn btn-sm btn-default) 有助于显示有多少可点击区域，但这不是基本功能所必需的。

我想一些 [in] 著名的 Rails Magic 有 radio_buttons 对待 href: 与 url 不同。 但它之所以“神奇”只是因为我不理解它（但——成长心态！）。背后的解释是什么？

【讨论】：