材料設計精簡版不Turbolinks

工作，我有一個有頭和抽屜導航一個簡單的頁面，如下材料設計精簡版不Turbolinks

我的問題是，每當我導航到另一個頁面，抽屜菜單圖標（漢堡包圖標）消失。我可以在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>

更新：唯一的辦法我能夠使雙方一起工作是在<body>

來源

2015-10-03 Alvin Then

另一種解決方案最末尾添加componentHandler.upgradeDom();使用TurboLinks' 頁：改變事件調用upgradeDom。

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

來源

2015-11-05 14:25:56 yellowiscool

對於TurboLinks 5，事件是'turbolinks：load'而不是'page：change'。 – yellowiscool

因此，當我轉到其他頁面時，這解決了我的問題。但它不能解決MDL下拉或抽屜的問題。你見過這個問題嗎？ –

謝謝，它的工作！ @JohnPollard這解決了我的問題，使用了mdl下拉菜單（使用Rails 5和TurboLinks 5，因此我使用的是'turbolinks：load'）。 –

材料設計精簡版不Turbolinks

回答

相關問題