adminLTE 2.4.5 树视图在刷新后无法正常工作，仅在 Rails 中工作答案

【问题标题】：adminLTE 2.4.5 treeview not working properly after refresh only it is working in railsadminLTE 2.4.5 树视图在刷新后无法正常工作，仅在 Rails 中工作
【发布时间】：2019-03-02 07:31:11
【问题描述】：

版本列表：- * 导轨 5.2.2 * 萨斯听（4.0.0） * sass-rails (5.0.7) * 链轮 (3.7.2) * 链轮导轨 (3.2.1) * turbolinks (5.2.0) * turbolinks-source (5.2.0)

我在 rails 5.2.2 版本中使用 adminLTE 2.4.5 版本。我正在加载的所有文件、供应商文件夹中的所有 adminLTE 资产、所有 UI 都工作正常，但多级菜单的树视图无法正常工作。

案例1：第一次使用或者手动刷新网页时。

案例2：当它工作时，如果我点击一个菜单项的链接，该链接将重定向到特定页面，但之后再次树视图不起作用，它甚至不会崩溃。

下面是我的代码：

<aside class="main-sidebar">
  <section class="sidebar">
    <ul class="sidebar-menu tree" data-widget="tree">
      <li class="treeview">
        <a href="#"><i class="fa fa-wrench"></i> <span>Reminders</span>
           <span class="pull-right-container">
             <i class="fa fa-angle-left pull-right"></i>
           </span>
        </a>
        <ul class="treeview-menu">
          <li>
            <%=link_to "Service Reminders",service_reminders_path%>
          </li>
          <li><a href="#">Vehicle Renewals</a></li>
        </ul>
      </li>
   </ul>
 </section>
</aside>

工作菜单截图：

点击服务提醒链接后，它会重定向到特定页面，然后树形视图停止工作

【问题讨论】：

您在项目中使用 turbolinks 吗？
是的，我使用了 turbolinks 5.2 @Vasilisa
对不起，没有时间写完整的答案，检查issue。如果对你有帮助，请自己写答案

标签： javascript css ruby-on-rails-5.2 adminlte

【解决方案1】：

我遇到了同样的问题，turbolinks 与树形菜单所需的 JavaScript 挂钩不兼容。

要禁用涡轮链接：

从 app/assets/javascript/application.js 删除，

//= require turbolinks

并从 app/views/layouts/application.html.erb 中删除以下 turbolinks 引用，

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

看起来像，

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

您还可以从 Gemfile 列表中删除 turbolinks gem。

然后您应该会发现您的树形菜单按预期工作。

【讨论】：

【解决方案2】：

不要禁用 turbolinks，因为它会加快 Rails 应用程序中页面之间的导航速度，而不是禁用它可以让它工作，然后我将解释它为什么不工作。
使用 Jquery 时，$(function(){...}) 简写绑定到文档就绪事件，常用。
很遗憾，这在默认配置下无法与 turbolink 一起使用。
更糟糕的是，它可以在整个页面加载时工作，但 $(function(){...}) 中的 js 代码不会在后续的 turbolinks 驱动的导航中运行，因为 turbolinks 不会触发文档就绪事件。
我已经通过添加 adminlte js 文件解决了这个问题。 $(document).on('turbolinks:load',function(){...})

以下是我替换 adminlte js 文件中的代码的代码，Tree 函数。

$(document).on('turbolinks:load', function(){
  $(Selector.data).each(function () {
    Plugin.call($(this));
  });
});

【讨论】：

【解决方案3】：

在你的布局文件中试试这个：

= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

【讨论】：

默认情况下，rails 会将此行添加到 application.html.erb 文件中。虽然它在那里，但树视图菜单不起作用。