我有一个简单的页面,有一个标题和抽屉导航,如下所示
我的问题是,每当我浏览到另一个页面,抽屉菜单图标(汉堡包图标)消失.我能够使用componentHandler.upgradeDom()触发图标显示;在Chrome的控制台.
我试图删除// =需要涡轮,一切都继续工作,当然是以我的页面加载速度为代价.
FYI,我把javascript移到了< body>的底部.提高第一页加载速度.我也试图将javascripts移回到< head>标签,有和没有data-turbolinks-track,问题仍然重现.
我希望MDL和Turbolinks可以一起工作,而不需要花费我(第一页)加载速度.
任何帮助非常感谢.
<body> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title"><%= yield(:title) %></span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation mdl-layout--large-screen-only"> <!-- some links --> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title"><%= yield(:title) %></span> <nav class="mdl-navigation"> <!-- some links --> </nav> </div> <main class="mdl-layout__content"> <%= yield %> </main> </div> <%= javascript_include_tag 'https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js','data-turbolinks-eval' => 'false' %> <%= javascript_include_tag 'application','data-turbolinks-eval' => false %> </body>
更新:我能够使两者一起工作的唯一方法是添加componentHandler.upgradeDom();在< body>的最末端
解决方法
另一个解决方案是使用TurboLinks的页面:change事件来调用upgradeDom.
document.addEventListener('page:change',function() { componentHandler.upgradeDom(); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。