MaterializeのParallaxとかsidenavをRailsで使うときの注意点

はじめに

RailsでMaterializeのParallaxとかsidenavとかとか使おうと
意気揚々とgem入れてサンプルコードをコピペして動かなかった人へ。
私も同じことをしたので、これ読んで速攻解決して次に進みましょう！
一応、jQueryを使います。

Railsで使うには初期化が必要

javascriptファイル作って中身をコピペしましょう。
私はわかりやすく「materialize-jquery.js」としました。

materialize-jquery.js

$(document).on('turbolinks:load', function () {
  // 各項目を初期化
  $('.sidenav').sidenav();
  $('.parallax').parallax();
  $('.dropdown-trigger').dropdown();
  $('.modal').modal();
});

// sidenavだけは、進む/戻るで動かなくなるので都度destroyが必要
$(document).on("turbolinks:before-cache", function () {
  $('.sidenav').sidenav('destroy');
  $('.dropdown-trigger').dropdown('destroy');
  $('.modal').modal('destroy');
});

これで問題なく動きます。

ついでに

こんな風にすると、sidenavが右から開きます。

  $('.sidenav').sidenav({
     edge: "right"
   });

Materializeのページではオプションの使い方の例すら書いておらず
非常に不親切 自走力が試されます。
他のオプションも同様なので、色々試してみましょう！

それでも動かない人

もしかしたら、jqueryとかを読み込む順番が間違っているかもしれないので
下記を参考に並び替えてみてください。

app/assets/javascripts/application.js

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