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

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

Моя проблема заключается в том, что всякий раз, когда я перехожу на другую страницу, значок меню ящика (значок гамбургера) исчезает. Мне удалось вызвать отображение значка с помощью 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 ruby-on-rails-4 material-design-lite
person Yaobin Then    schedule 03.10.2015    source источник

Ответы (1)


arrow_upward
20
arrow_downward

Другим решением является использование события page:change TurboLinks для вызова upgradeDom.

document.addEventListener('page:change', function() {
  componentHandler.upgradeDom();
});
person e741af0d41bc74bf854041f1fbdbf    schedule 05.11.2015
comment
В TurboLinks 5 событием является «turbolinks:load», а не «page:change». - person e741af0d41bc74bf854041f1fbdbf; 01.03.2016
comment
так что это исправило мою проблему, когда я перехожу на другие страницы. Но это не решает проблему для раскрывающихся списков MDL или ящика. Вы видели эту проблему? - person John Pollard; 24.04.2016
comment
Спасибо, это сработало! @JohnPollard Это устранило мою проблему с выпадающими списками mdl (с использованием Rails 5 и TurboLinks 5, поэтому я использовал событие «turbolinks: load»). - person Chris Margonis; 09.08.2016