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

Question

我对在 Rails 中进行开发还很陌生（老实说，总体上是在开发），所以我希望有人可以提供有关如何解决此问题的线索...

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

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

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

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

所以我包含//= require turbolinks在 application.js

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

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

问题截图

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

标签： htmlcssruby-on-railssimple-formturbolinks

Answer 1

将 Turbolinks 与预先存在的 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 答案https://stackoverflow.com/a/44057187/814031将为您提供如何处理更复杂的脚本设置的实用建议。

以下是另外两个链接，可能有助于您了解 turbolink：

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

TL;博士

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