Vật liệu Thiết kế Lite không làm việc với Turbolinks

Tôi có một trang đơn giản mà có một tiêu đề và ngăn kéo chuyển hướng, như sauVật liệu Thiết kế Lite không làm việc với Turbolinks

Vấn đề của tôi là, bất cứ khi nào tôi hướng đến một trang khác, biểu tượng menu ngăn kéo (biểu tượng bánh hamburger) biến mất. Tôi đã có thể kích hoạt biểu tượng để hiển thị bằng cách sử dụng componentHandler.upgradeDom(); tại bảng điều khiển của Chrome.

Tôi đã cố gắng xóa //= require turbolinks và mọi thứ tiếp tục hoạt động, tất nhiên là với chi phí tải trang của tôi.

FYI, tôi đã chuyển javascripts xuống dưới cùng của <body> để cải thiện tốc độ tải trang đầu tiên. Tôi cũng đã cố gắng di chuyển các javascripts trở lại thẻ <head>, có và không có data-turbolinks-track, sự cố vẫn tái diễn.

Tôi hy vọng MDL và Turbolinks có thể hoạt động cùng nhau mà không phải trả chi phí cho tôi (trang đầu tiên).

Bất kỳ trợ giúp nào được đánh giá cao.

<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>

Cập nhật: cách duy nhất tôi có thể làm cho cả hai làm việc cùng nhau là thêm componentHandler.upgradeDom(); vào cuối của <body>

Nguồn

2015-10-03 Alvin Then

Một giải pháp khác là sử dụng trang của TurboLinks: thay đổi kiện để gọi upgradeDom.

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

Nguồn

2015-11-05 14:25:56 yellowiscool

Với TurboLinks 5, sự kiện là 'turbolinks: load' thay vì 'page: change'. – yellowiscool

để điều này khắc phục được sự cố của tôi khi tôi chuyển tiếp tới các trang khác. Nhưng nó không khắc phục được sự cố cho trình đơn thả xuống MDL hoặc ngăn kéo. Bạn đã thấy vấn đề này chưa? –

Cảm ơn, nó đã hoạt động! @JohnPollard Điều này đã khắc phục sự cố của tôi với các trình đơn thả xuống mdl (sử dụng Rails 5 và TurboLinks 5, do đó sự kiện tôi đã sử dụng là 'turbolinks: load'). –

Vật liệu Thiết kế Lite không làm việc với Turbolinks

Trả lời

Các vấn đề liên quan