Материализация 1.0.0 гем, не позволяющая использовать функции jquery

Question

С гемом материализации 1.0.0 я продолжаю получать "Uncaught TypeError: sideNav" или "выпадающий список не является функцией" и возвращаюсь к версии материализации 0.100.2, чтобы все заработало. Я знаю, что это происходит из-за того, что jquery и материализация не работают вместе, как они должны, поэтому, если у кого-то есть понимание по этому вопросу, я был бы признателен, чтобы вместо этого я мог начать использовать 1.0.0.

Вот код. Дайте мне знать, если вам нужно больше.

application.js

 //= require rails-ujs
 //= require turbolinks
 //= require activestorage
 //= require jquery
 //= require materialize

Приложение / макеты / общий / _header.html.erb

   <nav>
    <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
   </nav>

   <ul class="sidenav" id="mobile-demo">
     <li><a href="sass.html">Sass</a></li>
     <li><a href="badges.html">Components</a></li>
     <li><a href="collapsible.html">Javascript</a></li>
     <li><a href="mobile.html">Mobile</a></li>
   </ul>

   <script>
      $(document).ready(function(){
       $('.sidenav').sidenav();
      });
   </script>

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

Answer 1

Ладно, ребята, я провел еще немного исследований и обнаружил пост на GitHub, который помог мне понять, что я ошибался в своей проблеме, связанной с версией jquery, и что мне действительно нужно было добавить сценарий кофе в мою папку assets / javascript чтобы помочь вещам. https://github.com/mkhairi/materialize-sass/issues/176

Этого раньше мне никогда не приходило в голову, потому что 0.100.2 этого никогда не требовалось. Надеюсь, это поможет любому, кто наткнется на этот пост с той же проблемой.

Вот файл, который я добавил.

активы / JavaScripts / init.coffee

$(document).on 'turbolinks:before-visit turbolinks:before-cache', ->
  elem = document.querySelector('#slide-out');
  instance = M.Sidenav.getInstance(elem) if elem
 if instance
  instance.close() if instance.isOpen #close on click
  instance.destroy()

 $(document).on 'turbolinks:before-visit turbolinks:before-cache', ->
  $('.toast').remove()

 $(document).on 'turbolinks:load', ->
  elem = document.querySelector('#slide-out');
  instance = new M.Sidenav(elem, {}) if elem

 $(document).on 'turbolinks:load', ->
  Waves.displayEffect()

 # Reset
 M.Modal._count = 0;
 M.ScrollSpy._count = 0;

$('.modal').modal();
$('.carousel').carousel();
$('.collapsible').not('.expandable').collapsible();
$('.collapsible.expandable').collapsible({accordion: false});
$('.tap-target').tapTarget();

$('.slider').slider();
$('.parallax').parallax();
$('.materialboxed').materialbox();

$('.scrollspy').scrollSpy();
$('.datepicker').datepicker();
$('.timepicker').timepicker();
$('.tooltipped').tooltip();
$('.dropdown-trigger').dropdown();

#form
M.updateTextFields()
$('select').not('.disabled').formSelect();

$('input.autocomplete').autocomplete data:
 'Apple': null
 'Microsoft': null
 'Google': 'http://placehold.it/250x250'
$('input[data-length], textarea[data-length]').characterCounter();


 $('.tabs').tabs();
 # Swipeable Tabs Demo Init
 if $('#tabs-swipe-demo').length
  $('#tabs-swipe-demo').tabs 'swipeable': true

 # Chips

 # Handle removal of static chips.
 $(document.body).on 'click', '.chip .close', ->
  $chips = $(this).closest('.chips')
   if $chips.length and $chips[0].M_Chips
  return
  $(this).closest('.chip').remove()

  $('.chips').chips()
  $('.chips-initial').chips
   readOnly: true
  data: [
   { tag: 'Apple' }
   { tag: 'Microsoft' }
   { tag: 'Google' }
  ]
 $('.chips-placeholder').chips
  placeholder: 'Enter a tag'
  secondaryPlaceholder: '+Tag'
 $('.chips-autocomplete').chips autocompleteOptions: data:
  'Apple': null
  'Microsoft': null
  'Google': null

 # Fab
 $('.fixed-action-btn').floatingActionButton()
 $('.fixed-action-btn.horizontal').floatingActionButton direction: 'left'
 $('.fixed-action-btn.click-to-toggle').floatingActionButton
  direction: 'left'
  hoverEnabled: false
 $('.fixed-action-btn.toolbar').floatingActionButton toolbarEnabled: true


 console.log "load init on ready or turbolinks:load"

Это легко исправить. Sidenav и выпадающий теперь отлично работают!