adminLTE 2.4.5 древовидная структура не работает должным образом после обновления только она работает в рельсах

Question

список версий: - * rails 5.2.2 * sass-listen (4.0.0) * sass-rails (5.0.7) * звездочки (3.7.2) * звездочки-рельсы (3.2.1) * турболинки (5.2.0) * turbolinks-source (5.2.0)

Я использую версию adminLTE 2.4.5 в версии rails 5.2.2.Все файлы, которые я загружаю, все ресурсы adminLTE из папки vendor, все пользовательский интерфейс работает нормально, но древовидная структура для многоуровневых меню не работает должным образом.

case 1: Это работает впервыеили когда я вручную обновляю веб-страницу.

case 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>

Скриншоты рабочего меню:

После нажатия на ссылку напоминания об услуге он перенаправляет на определенную страницу, после чего перестает работать древовидный список

Answer 1

У меня была та же проблема, турболинки не совместимы с хуками JavaScript, которые требуются для древовидного меню.

Чтобы отключить турболинки:

Из app / assets / javascript / application.js удалить,

//= require turbolinks

и из app / views / layouts / application.html.erb удалить следующие ссылки на турболинки,

<%= 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' %>

Вы также можете удалить драгоценный камень turbolinks из списка Gemfile.

Затем вы должны найти, что ваше древовидное меню работает, как ожидалось.

Answer 2

• Не отключайте турболинки, потому что это ускоряет навигацию между страницами в приложении rails, вместо того, чтобы отключить, вы можете заставить его работать до того, как я объясню, почему он не работает.
• При использовании Jquery, сокращенная $ (function () {...}) для привязки к событию готовности документа, и это обычно используется.
• К сожалению, это при конфигурации по умолчанию не будет работать с турболинками.
• Что еще хуже, он будет работать при полной загрузке страницы, но js-код в $ (function () {...}) не будет работать при последующей навигации с использованием турболинк, поскольку турболинк не вызывает документсобытие ready.
• Я решил эту проблему, добавив в файл adminlte js.$(document).on('turbolinks:load',function(){...})

Ниже приведен код, в котором я заменил код в файле adminlte js, функция Tree.

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

Answer 3

Попробуйте это в вашем файле макета:

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