Material Design Lite nicht mit Turbolinks Arbeits

ich eine einfache Seite, die einen Header und Schublade Navigation hat, wie weiter untenMaterial Design Lite nicht mit Turbolinks Arbeits

Mein Problem ist, wenn ich zu einer anderen Seite navigieren, die Schublade Menüsymbol (Hamburger Symbol) verschwindet. Ich konnte das Symbol unter Verwendung der componentHandler.upgradeDom(); auf der Chrome-Konsole auslösen.

Ich habe versucht, //= require turbolinks zu entfernen und alles funktioniert weiter, natürlich auf Kosten meiner Seiten Ladegeschwindigkeit.

FYI, ich habe Javascripts an den unteren Rand von <body> verschoben, um die Ladegeschwindigkeit der ersten Seite zu verbessern. Ich habe auch versucht, die Javascripts zurück zu Tag zu bewegen, mit und ohne data-turbolinks-track, das Problem immer noch auftreten.

Ich hoffe, MDL und Turbolinks können zusammenarbeiten, ohne mich (erste Seite) Ladegeschwindigkeit zu kosten.

Jede Hilfe sehr geschätzt.

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

Update: der einzige Weg, ich in der Lage beide arbeiten zusammen zu machen, ist componentHandler.upgradeDom(); ganz am Ende von <body>

Quelle

2015-10-03 Alvin Then

hinzufügen Eine andere Lösung ist es, die Seite TurboLinks mit: Ereignis ändern upgradeDom anrufen.

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

Quelle

2015-11-05 14:25:56 yellowiscool

Mit TurboLinks 5 ist die Veranstaltung 'turbolinks: load' anstelle von 'Seite: change'. – yellowiscool

so das mein Problem behoben, wenn ich auf andere Seiten gehe. Das Problem für die MDL-Dropdownlisten oder die Schublade wird jedoch nicht behoben. Hast du dieses Problem gesehen? –

Danke, es hat funktioniert! @JohnPollard Das behebt mein Problem mit MDL-Drop-Downs (Usings Rails 5 und TurboLinks 5, daher ist das Event, das ich verwendet habe, 'Turbolinks: load'). –

Material Design Lite nicht mit Turbolinks Arbeits

Antwort

Verwandte Themen