Material Design Lite не работает с Turbolinks

У меня есть простая страница с навигацией заголовка и ящика, как показано ниже

Моя проблема, всякий раз, когда я перехожу на другую страницу, значок меню выдвижного ящика (значок гамбургера) исчезает. Я смог вызвать значок, отображаемый с помощью componentHandler.upgradeDom(); в консоли Chrome.

Я попытался удалить //= require turbolinks, и все продолжает работать, конечно, за счет скорости загрузки моих страниц.

FYI, я переместил 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>

Ответ 1