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

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

我试图删除//= 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的页面:change 事件来调用 upgradeDom

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

关于ruby-on-rails-4 - Material Design Lite不适用于Turbolinks,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32923179/

10-12 19:09