Javascript не работает с Materialise-CSS (рельсы)

Question

У меня проблема с ruby ​​на рельсах и материализацией (javscript connexion).Я установил https://github.com/mkhairi/materialize-sass и неактивные турболинки.Например, когда я создаю раскрывающееся меню на своей html-странице и когда в файле javascript я инициализирую раскрывающееся меню.Это не работает, как если бы не было никакого javascript

на мой взгляд (indexCo.html.erb):

<div class="container">
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a> 
</li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li> 
</ul>
</div>

application.js:

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require materialize
$('.dropdown-trigger').dropdown();

application.html.erb:

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

Я пробовал с турболинками или напрямую импортировал в application.html.erb с

https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css

и

https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js

Но ничего не работает, так же, как параллакс или любые другие элементы Спасибо за вашу помощь и извините за перевод Google пока

Answer 1

Не отключать turbolinks.Нигде в документации: https://github.com/mkhairi/materialize-sass не сказано, чтобы деактивировать turbolinks.

. Вы можете изменить application.css на application.scss и добавить это: @import "materialize"; там в соответствии с инструкциями документаили вы можете создать custom.css.scss и добавить @import "materialize";.

Следующий шаг, и я подозреваю, что причина, по которой вы не получаете никакого поведения, состоит в том, чтобы потребовать jquery, так же, как вы требовали materializeвот так:

//= require rails-ujs
//= require jquery
//= require materialize
//= require turbolinks
//= require_tree .

Я могу понять, пропуская этот шаг, поскольку он не описан в документах, поэтому он делает его небольшим уловкой, которая может стать стеной, если вы не продумываете это спокойно и тщательно.

Наконец, в том же файле application.js вы отбрасываете последний документ из документов:

//= require rails-ujs
//= require jquery
//= require materialize
//= require turbolinks
//= require_tree .

$(document).on('turbolinks:load', function() {
  $('.dropdown-trigger').dropdown();
});