我有一个简单的页面,它有一个标题和抽屉导航,如下所示
我的问题是 ,每当我导航到另一个页面时,抽屉菜单图标(汉堡包图标)就会消失。我能够使用 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>
更新:我能够让两者一起工作的唯一方法是添加
componentHandler.upgradeDom();
在<body>
的最后
最佳答案
另一种解决方案是使用 TurboLinks 的 页面:更改 事件电话升级域名 .
document.addEventListener('page:change', function() {
componentHandler.upgradeDom();
});
关于ruby-on-rails-4 - Material Design Lite 不适用于 Turbolinks,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32923179/