Rubyonrails 根据表单内的 Select 字段值渲染部分内容

发布于07月15日

在Rails7应用程序中，当 Select 新值时，我需要使用特定于工作流的字段呈现部分内容.做这件事的最佳方式是什么？我有一种感觉，只要使用Turbo帧，而不需要刺激或Turbo流，这是可能的.

<%= form_with(model: @post, url: posts_path) do |form| %>
  <%= form.label :workflow %>
  <%= form.select :workflow, options_for_select(@workflow_options) %>

  <% if @role.workflow.present? %>
    <%= render partial: "#{@role.workflow}_properties", locals: { properties: @role[:workflow_properties] } %>
  <% end %>

  <%= form.submit "Create Post" %>
<% end %>

推荐答案

我想出了三个解决方案.我制作了这些副本--可以粘贴到任何页面上.onchange可以用简单的刺激控制器来代替，或者仅仅是一个事件监听器和一些数据属性.

Set turbo frame `src`

使用所需参数设置新的turbo帧URL:

<%= form_with url: request.path do |f| %>
  <%= f.select :workflow, ["basic", "advanced"], {prompt: true},
    onchange: "workflow_frame.src=`${location.href}?workflow=${this.value}`" %> <br>

  <%= turbo_frame_tag :workflow_frame do %>
    TODO: render "<%= ['workflow', params[:workflow].presence].compact.join('_') %>"
  <% end %>
<% end %>

使用另一个提交按钮

提交表单以执行创建/更新以外的操作:

<%= form_with url: request.path do |f| %>
  <%= f.select :workflow, ["basic", "advanced"], {prompt: true} %>
  <%= f.submit "next", formaction: request.path, formmethod: :get,
    data: {turbo_frame: :workflow_frame_two} %> <br>

  <%= turbo_frame_tag :workflow_frame_two do %>
    TODO: render "<%= ['workflow', params[:workflow].presence].compact.join('_') %>"
  <% end %>
<% end %>

你可以自动点击"下一步"按钮:

<%= form_with url: request.path do |f| %>
  <%= f.select :workflow, ["basic", "advanced"], {prompt: true},
    onchange: "update_workflow_frame.click()" %> <br>
  <%= f.submit "next", id: "update_workflow_frame", formaction: request.path, formmethod: :get,
    data: {turbo_frame: :workflow_frame_two}, style: "display:none!important" %>

  <%= turbo_frame_tag :workflow_frame_two do %>
    TODO: render "<%= ['workflow', params[:workflow].presence].compact.join('_') %>"
  <% end %>
<% end %>

使用链接(无Java脚本)

使用链接而不是 Select 字段来触发加速帧导航:

<% current_workflow = ->(str) { str.eql?(params[:workflow]) } %>
<%= form_with url: request.path do |f| %>
  <%= turbo_frame_tag :workflow_frame_three do %>
    <%= link_to "basic",    request.path + "?workflow=basic",    class: {selected: current_workflow.("basic") } %> <br>
    <%= link_to "advanced", request.path + "?workflow=advanced", class: {selected: current_workflow.("advanced") } %> <br>
    <%= f.hidden_field :workflow, value: params[:workflow] %>

    TODO: render "<%= ['workflow', params[:workflow].presence].compact.join('_') %>"
  <% end %>
<% end %>
<style>.selected{font-weight: bold}</style>