Rails中的Turbolink出现问题：可折叠的菜单和发送复选框的形式

问题描述

我对使用Rails进行开发还很陌生（说实话，通常来说，开发），所以我希望有人可以提供有关如何解决此问题的线索...

我正在使用WrapBootstrap中的Inspinia模板创建Rails网络应用（红宝石2.6.5，rails 6.0.1）。

该模板的导航侧栏具有预配置的行为（下拉/可折叠的第二级菜单项等）。一切正常。

但是，我需要创建一个视图页面来控制佣金，因此为了标记已付佣金，我创建了一个带有单个复选框的simple_form表单，该复选框将切换“已付”与“未付”属性。

发生的事情是，当我单击复选框时，即使我有turbolinks宝石，也收到未找到Turbolinks的错误消息。

所以我在application.js中加入了//= require turbolinks

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

我不确定该怎么做，因为我需要为自己的表单正常工作而需要turbolinks，但我也希望折叠边栏菜单。

screenshot of the issue

HTML菜单项的示例（当在浏览器中检查HTML且侧栏正常运行时，有一个名为“ aria-expanded”的类不会在我的常规HTML上显示）：

<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,input_html: { value: 'toggle' } %>
   <% end %>
<% end %>

application.js中的代码：

//= 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  

CSS：

.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;
}

解决方法

将Turbolinks与预先存在的javascript结合使用并不是那么简单，您必须考虑到这一事实，即不再有硬重载，它会在加载时重新初始化菜单或任何其他javascript。

您的菜单保持打开状态，因为从页面导航离开时其状态永远不会重置。

通过重新加载硬页，您可以免费获得此文件，在Turbolink中，您必须注意before-cache事件中的拆卸。 （https://github.com/turbolinks/turbolinks#preparing-the-page-to-be-cached）

document.addEventListener("turbolinks:before-cache",function() {
  // reset the menu
  // if your menu uses Bootstrap Collapse then use something like this:
  $('.collapse').collapse('dispose')
  // @see: https://getbootstrap.com/docs/4.5/components/collapse/#collapsedispose
})

这个答案https://stackoverflow.com/a/44057187/814031将为您提供有关如何进行更复杂的脚本设置的实用建议。

还有另外两个链接可能会帮助您了解涡轮链接：

https://sevos.io/2017/02/27/turbolinks-lifecycle-explained.html http://www.modernmpa.com/turbolinks

TL; DR

和如果仅您的表单依赖于Turbolink，请在没有表单的情况下使它起作用，并且完全不使用TurboLink。那是我的建议。