Html Rails中TurboLink的问题：可折叠菜单和发送复选框表单

我对Rails的开发相当陌生（老实说，一般来说是开发的），所以我希望有人能给出解决这个问题的线索

我正在使用WrapBootstrap中的Inspinia模板创建一个rails web应用程序（ruby 2.6.5，rails 6.0.1）

该模板有一个带有预配置行为（下拉/可折叠的二级菜单项等）的导航侧栏。这很好用

但是，我需要创建一个查看页面来控制佣金，因此为了标记已支付的佣金，我创建了一个简单的表单，其中有一个复选框，用于切换“已支付”与“未支付”属性

发生的情况是，当我单击复选框时，我得到一个错误，即没有找到turbolinks，即使我有turbolinks gem

因此我在application.js中包含了

/=require turbolinks

但当我这样做时，导航侧栏中带有子级别的可折叠菜单项保持打开状态，不再折叠

我不知道该怎么办，因为我需要TurboLink才能使表单正常工作，但我也希望侧栏菜单折叠

HTML菜单项示例（当在浏览器中检查HTML时，侧栏工作正常，有一个名为“aria expanded”的类在我的普通HTML中不显示）：

CSS:

---

将TurboLink与预先存在的javascript一起使用并不是那么简单，您必须牢记这样一个事实，即不再存在会重新初始化菜单或加载的任何其他javascript的硬重新加载

您的菜单保持打开状态，因为在离开页面导航时，其状态从未重置

通过硬页面重新加载，您可以免费获得此功能，在TurboLink中，您必须在缓存之前处理

事件中的拆卸。（）

document.addEventListener（“turbolinks:before cache”，function（））{
//重置菜单
//如果您的菜单使用引导折叠，请使用以下内容：
$（'.collapse'）。collapse（'dispose'））
//@见：https://getbootstrap.com/docs/4.5/components/collapse/#collapsedispose
})

这个答案将为您提供很好的实用建议，指导您如何处理更复杂的脚本设置

以下是另外两个可能有助于您理解TurboLink的链接：



TL；DR

而且如果只有你的表单依赖于turbolinks，那么在没有turbolinks的情况下就可以工作，并且根本不使用turbolinks。这是我的建议。

<li class="border-top <%= 'active' if current_page?('/operations') || current_page?('/operations/new') || current_page?('/vencimento') %>">
   <a href="#"><i class="fa fa-cogs"></i><span class="nav-label" data-i18n="nav.menulevels"> Operations </span><span class="fa arrow"></span></a>
      <ul class="nav nav-second-level">
         <li> <%= link_to "Operations List", operations_path %> </li>
         <li> <%= link_to "New Operation", new_operation_path %> </li>
         <li> <%= link_to "Due Options", vencimento_path %> </li>
      </ul>
 </li>

<%= simple_form_for(operation, remote: true) do |f|%>
   <%= f.check_box :status, label: false, onchange: 'Rails.fire(this.form, "submit")', id: "checkbox-#{operation.id}", value: true, input_html: {  checked_value: true, unchecked_value: false }, checked: operation.status == 'Terminada' ? 'checked' : '' %>
   <%= f.simple_fields_for :toggle_com do |d| %>
      <%= d.input :commission, as: :hidden, label: false, input_html: { value: 'toggle' } %>
   <% end %>
<% end %>

//= require rails-ujs
//= require activestorage
//= require jquery/jquery-3.1.1.min.js
//= require popper
//= require bootstrap
//= require pace/pace.min.js
//= require slimscroll/jquery.slimscroll.min.js
//= require metisMenu/jquery.metisMenu.js
//= require inspinia.js
//= require dataTables/datatables.min.js
//= require dataTables/dataTables.bootstrap4.min.js
//= require datapicker/bootstrap-datepicker.js
//= require chartkick
//= require Chart.bundle  

.nav > li > a {
  color: $nav-text-color;
  font-weight: 600;
  padding: 14px 20px 14px 25px;
  display: block;
}

.nav.metismenu > li {
  display: block;
  width: 100%;
  position: relative;
}

.nav.metismenu .dropdown-menu > li > a {
  padding: 3px 20px;
  display: block;
}

.nav.navbar-right > li > a {
  color: #999c9e;
}

.nav > li.active > a {
  color: #ffffff;
}

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {
  background-color: darken($nav-bg, 3%);
  color: white;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  background: #fff;
}

.nav.navbar-top-links > li > a:hover, .nav.navbar-top-links > li > a:focus {
  background-color: transparent;
}

.nav > li > a i {
  margin-right: 6px;
}
ul.nav-second-level {
  background: darken($nav-bg, 3%);
}

.nav > li.active {
  border-left: 4px solid darken($navy, 2%);
  background: darken($nav-bg, 3%);
}

.nav.nav-second-level > li.active {
  border: none;
}

.nav.nav-second-level.collapse[style] {
  height: auto !important;
}