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

Question

我对 Rails 中的开发还很陌生（老实说，开发一般），所以我希望有人能提供解决这个问题的线索...

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

该模板有一个带有预配置行为的导航侧栏（drop-down/collapsible 二级菜单项等）。这工作正常。

但是我需要创建一个视图页面来控制佣金，因此为了标记已支付的佣金，我创建了一个 simple_form 表单，其中包含一个复选框，可以切换 'paid' 与 [=44] =] 属性.

发生的情况是，当我单击该复选框时，我收到一个错误，提示找不到 turbolinks，即使我有 turbolinks gem。

所以我在 application.js

中加入了 //= require turbolinks

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

我不确定该怎么做，因为我需要 turbolinks 才能使我的表单正常工作，但我也希望侧边栏菜单折叠起来。

screenshot of the issue

HTML 菜单项示例（在浏览器中检查 HTML 时，边栏正常工作，有 class 称为 '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, label: false, 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;
}

Answer 1

将 Turbolinks 与 pre-existing javascript 一起使用并不是那么简单，您必须牢记这样一个事实，即不再需要硬重新加载来重新初始化您的菜单或任何其他 javascript 加载中。

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

通过硬页面重新加载，您可以免费获得它，在 turbolinks 中，您必须处理 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
})

这个 SO 答案将为您提供如何处理更复杂的脚本设置的实用建议。

这里有两个可能有助于您理解 turbolinks 的链接：

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

TL;DR

并且 如果只有您的表单依赖于 turbolinks，那么在没有它的情况下也能正常工作并且根本不使用 turbolinks。这是我的建议。

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

Trouble with turbolinks in Rails: collapsible menu and sending checkbox form

html

css

ruby-on-rails

simple-form

turbolinks