adminLTE 2.4.5 树视图在刷新后无法正常工作,仅在 rails 中工作
adminLTE 2.4.5 treeview not working properly after refresh only it is working in rails
版本列表:-
* rails 5.2.2
* sass-听 (4.0.0)
* sass-rails (5.0.7)
* 链轮 (3.7.2)
* 链轮-rails (3.2.1)
* turbolinks (5.2.0)
* turbolinks-source (5.2.0)
我在 rails 5.2.2 版本中使用 adminLTE 2.4.5 版本。我正在加载的所有文件,供应商文件夹中的所有 adminLTE 资产,所有 UI 都工作正常,但多级菜单的树视图无法正常工作。
情况一:第一次或手动刷新网页时正常
情况 2:当它工作时,如果我单击菜单项的 link,link 将重定向到特定页面,但在那之后树视图再次不起作用,它甚至不崩溃。
下面是我的代码:
<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>
工作菜单截图:
点击服务提醒后 link 它重定向到特定页面然后树视图停止工作
在布局文件中试试这个:
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
我有同样的问题,turbolinks 与 treemenu 需要的 JavaScript 挂钩不兼容。
要禁用 turbolinks:
从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。
然后您应该会发现您的树形菜单按预期工作。
- 不要禁用 turbolinks,因为它会加速 rails 应用程序中页面之间的导航,而不是禁用你可以让它工作之前我会解释为什么它不工作。
- 在使用Jquery时,$(function(){...})shorthand绑定文档就绪事件,常用。
- 不幸的是,默认配置下它不适用于 turbolinks。
- 更糟糕的是,它可以在整个页面加载时工作,但是 $(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));
});
});
版本列表:- * rails 5.2.2 * sass-听 (4.0.0) * sass-rails (5.0.7) * 链轮 (3.7.2) * 链轮-rails (3.2.1) * turbolinks (5.2.0) * turbolinks-source (5.2.0)
我在 rails 5.2.2 版本中使用 adminLTE 2.4.5 版本。我正在加载的所有文件,供应商文件夹中的所有 adminLTE 资产,所有 UI 都工作正常,但多级菜单的树视图无法正常工作。
情况一:第一次或手动刷新网页时正常
情况 2:当它工作时,如果我单击菜单项的 link,link 将重定向到特定页面,但在那之后树视图再次不起作用,它甚至不崩溃。
下面是我的代码:
<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>
工作菜单截图:
点击服务提醒后 link 它重定向到特定页面然后树视图停止工作
在布局文件中试试这个:
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
我有同样的问题,turbolinks 与 treemenu 需要的 JavaScript 挂钩不兼容。
要禁用 turbolinks:
从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。
然后您应该会发现您的树形菜单按预期工作。
- 不要禁用 turbolinks,因为它会加速 rails 应用程序中页面之间的导航,而不是禁用你可以让它工作之前我会解释为什么它不工作。
- 在使用Jquery时,$(function(){...})shorthand绑定文档就绪事件,常用。
- 不幸的是,默认配置下它不适用于 turbolinks。
- 更糟糕的是,它可以在整个页面加载时工作,但是 $(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));
});
});