铁轨刺激的一种形式变化，用于许多URL和涡轮框架

Question

我正在构建一个仪表板，其中包含多个元素，例如图表，表格，具有计算值的简单字段等，我想将Rails7与刺激一起使用。

过去，我使用了jQuery，所以我刚刚创建了空元素，然后在Paralel中调用了几个Ajax请求，以获取每个元素的数据并填充它。因此，初始页面加载超快，然后加载了所有必要的数据。仪表板几乎没有下拉列表选项可以更改数据，当我加载页面时，我刚刚发送了默认值。每次下拉更改都通过在下拉列表中使用的过滤器重新加载了所有元素的所有数据。

如何对刺激进行类似的方法？ 当我使用Turbo表单时，我能做的就是在页面加载上提交表单，但看起来很丑（页面最初加载并立即重新加载）。而且，如果我有很多元素，它会变得慢，因为它首先需要完成所有计算。

这是我的简单过滤器，有2个下拉列表

<%= form_with url: "", method: :get, data: { controller: "home", home_target: "form", turbo_frame: "home_dashboard", turbo_action: "advance" } do |form| %>
<div class="row">
<div class="d-sm-flex align-items-center mb-3">
    <div class="col-lg-2" >

<%= form.select :city, options_for_select(City.all.pluck(:name,:id)), {include_blank: (t 'all')}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
<div class="col-lg-2" >

<%= form.select :year, options_for_select(@years.reverse, (params[:year] || Date.today.year)), {selected: params[:year], include_blank:false}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
</div>
</div>
<% end %>

，这是我的刺激中的家用控制器，这很简单，

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="home"
export default class extends Controller {
  connect() {
  }

  static targets = ["form"]

  connect() {
    this.formTarget.requestSubmit()
  }
    
    search() {
     this.formTarget.requestSubmit()
    }

}

我的栏杆控制器变得很丑陋，因为我动态地计算了很多字段，并在涡轮框架框架标签中显示它们...这只是数据的一部分我想展示，所以应该有更多

<%= turbo_frame_tag "home_dashboard" do %>
<div class="row">
    <div class="col-xl-6">
<div class="card border-0 mb-3 overflow-hidden ">
<div class="card-body">
<div class="row">
<div class="col-xl-7 col-lg-8">
<div class="mb-3 fs-13px">
<b><%= (t 'invoices.invoiced').upcase %></b>
</div>

<div class="d-flex mb-1">
    <% if @invoices_sumed.present? %>
<h2 class="mb-0"><span data-animation="number" data-value="<%= @invoices_sumed[0][1] %>"><%= @invoices_sumed[0][1] %></span> <%= @invoices_sumed[0][0]  %></h2>
<% else %>
<h2 class="mb-0"><span data-animation="number" data-value="0">0</span> EUR</h2>
<% end %>
</div>
<div class="mb-3">
<i class="fa fa-caret-up"></i> <span data-animation="number" data-value="<%=  @invoices_sumed_compare %>"><%=  @invoices_sumed_compare %></span>% <%= t 'invoices.compared_previous_year' %>
</div>
<hr>
<div class="row text-truncate">

<div class="col-6">
<div class=""><%= t 'invoices.total' %></div>
<div class="fs-18px mb-5px fw-bold" data-animation="number" data-value="<%= @invoices.size %>"><%= @invoices.size %></div>
<div class="progress h-5px rounded-3  mb-5px">
<div class="progress-bar progress-bar-striped rounded-right " data-animation="width" data-value="<%= calc_year_ratio(@invoices.size,@invoices_total_size) %>%" style="width: <%= calc_year_ratio(@invoices.size,@invoices_total_size) %>%;"></div>
</div>
</div>

<div class="col-6">
<div class=""><%= t 'invoices.average' %> <small>(<%= (t 'invoices.median').to_s + ":" %> <strong><%= "#{@invoices_median_value.round(2)} #{@invoices_top_currency}"  %></strong>)</small></div>
<div class="fs-18px mb-5px fw-bold"><span data-animation="number" data-value="<%= @invoices_avg_value.round(2) %>"><%= @invoices_avg_value.round(2) %></span> <%= @invoices_top_currency %></div>
<div class="progress h-5px rounded-3  mb-5px">
<div class="progress-bar progress-bar-striped rounded-right bg-orange" data-animation="width" data-value="<%= calc_median_total_ratio(@invoices_avg_value,@invoices_max_value) %>%" style="width: <%= calc_median_total_ratio(@invoices_avg_value,@invoices_max_value) %>%;"></div>
</div>
</div>
</div>

</div>


<div class="col-xl-5 col-lg-4 align-items-center d-flex justify-content-center">
<canvas
  data-controller="chart"
  data-chart-data-value='<%= @chart_total.to_json %>'
  data-chart-options-value="<%= @chart_options.to_json %>"
></canvas>
</div>
</div>
</div>
</div>
    </div>
<div class="col-xl-4">
    <div class="table-responsive">
         <table id="contractors"  class="table table-hover align-middle" style="width:100%;">
            <thead></thead>
            <tbody>
                <% @contractors.each do |contractor| %>
                <tr>
                    <td><%= contractor[0]%></td>
                    <td><%= contractor[2]%></td>
                </tr>
                <% end %>
            </tbody>
         </table>
    </div>
</div>

</div>
<% end %>

方法可以在多个涡轮框架中将其拆分，并用多个URL拨打一个表单选择更改？