Material Design Lite 无法与 Turbolinks 一起使用

Question

我有一个带有页眉和抽屉导航的简单页面，如下所示

我的问题是，每当我导航到另一个页面时，抽屉菜单图标（汉堡包图标）就会消失。我能够在 Chrome 的控制台使用 componentHandler.upgradeDom(); 触发图标显示。

我尝试删除 //= require turbolinks 并且一切正常，当然是以我的页面加载速度为代价的。

仅供参考，我将 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>

更新：我能让两者一起工作的唯一方法是在 <body>

的最后添加 componentHandler.upgradeDom();

Answer 1

另一个解决方案是使用 TurboLinks 的 page:change 事件调用 upgradeDom.

document.addEventListener('page:change', function() {
  componentHandler.upgradeDom();
});

Material Design Lite 无法与 Turbolinks 一起使用

Material Design Lite not working with Turbolinks

ruby-on-rails-4

turbolinks

material-design-lite