Yao*_*hen 11 turbolinks ruby-on-rails-4 material-design-lite
我有一个简单的页面,有一个标题和抽屉导航,如下所示
我的问题是,每当我导航到另一个页面时,抽屉菜单图标(汉堡包图标)就会消失.我能够触发图标显示componentHandler.upgradeDom();在Chrome的控制台上使用.
我试图删除//= require turbolinks,一切都继续工作,当然以我的页面加载速度为代价.
仅供参考,我将javascripts移至底部<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>
Run Code Online (Sandbox Code Playgroud)
更新:我能够使两者协同工作的唯一方法是componentHandler.upgradeDom();在最后添加<body>
e74*_*dbf 20
另一个解决方案是使用TurboLinks的页面:change event来调用upgradeDom.
document.addEventListener('page:change', function() {
componentHandler.upgradeDom();
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1577 次 |
| 最近记录: |