无法为 Materialize on Rails 加载自定义 JS 文件答案

【问题标题】：Can't load custom JS file for Materialize on Rails无法为 Materialize on Rails 加载自定义 JS 文件
【发布时间】：2018-02-27 00:05:51
【问题描述】：

我正在尝试在 Rails 上为我的 Materialise 网站加载自定义 index.js 文件，我尝试了各种方法，但仍然无法加载。下面我包含了我的 index.html.erb、index.js、application.js、application.html.erb 和 application.scss。

如果您需要任何澄清或其他脚本文件，请让我知道，如果您需要任何关于我做错了什么的帮助，将会非常有用。

提前致谢。

/* Index.js created by Roberto Capurro 2/14/2018 */

$(document).ready(function(){
    $('#form').carousel();
    $('#homeSearch').carousel();
  });

$('.carousel.carousel-slider').carousel({fullWidth: true});

setInterval(function(){
    $('#form').carousel('next');
  }, 5000);

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require material_icons
 */
@import "materialize";
@import "materialize/extras/nouislider";
@import "https://fonts.googleapis.com/icon?family=Material\Icons";

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="css/index.css"></link>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <title>Liberty Core Real Estate</title>
  </head>

  <!-- NavBar Drowndown Structures -->
   

  <!-- NavBar -->
  <div class="navbar-fixed">
      <nav>
          <div class="nav-wrapper">
              <a href="#" class="brand-logo"><%= image_tag("index/libcore.png", :alt => "rss feed") %>
              </a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                  <li class="active"><a href="home.html">Home</a></li>
                  <li ><a href="buyers.html">Buyers</a></li>
                  <li ><a href="buyers.html">Sellers</a></li>
                  <li ><a href="buyers.html">Home Search</a></li>
                  <li ><a href="buyers.html">Agents</a></li>
                  <li ><a href="buyers.html">Contact Us</a></li>
                  <li ><a href="buyers.html">My Account</a></li>
              </ul>
          </div>
      </nav>
  </div>
  

  <body>
      <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <script src="js/index.js"></script>
          <!-- Home Page Search Container -->
          <div class="carousel carousel-slider" id="form">
              <a class="carousel-item"><img src="css/Assets/DTOmaha.jpg"></a>
              <div class="carousel-fixed-item center">
                      <div class="row1 search1">
                              <form class="col s12">
                                <div class="row">
                                  <div class="input-field col s3">
                                    <input id="min_price" type="text" class="validate">
                                    <label for="min_price">Min Price</label>
                                  </div>
                                  <div class="input-field col s3">
                                    <input id="max_price" type="text" class="validate">
                                    <label for="max_price">Max Price</label>
                                  </div>
                                  <div class="input-field col s3">
                                    <input id="min_bed" type="text" class="validate">
                                    <label for="min_bed">Min Bedrooms</label>
                                  </div>
                                  <div class="input-field col s3">
                                    <input id="min_bath" type="text" class="validate">
                                    <label for="min_bath">Min Baths</label>
                                  </div>
                                  <div>
                                  <!-- Search Button -->
                                    <button class="btn waves-effect waves-light" type="submit" name="action">Submit
                                      <i class="material-icons right">send</i>
                                    </button>
                                  </div>
                                </div>
                              </div>
                              
              </div>
              <a class="carousel-item"><img src="https://lorempixel.com/800/400/food/2"></a>
              <a class="carousel-item"><img src="https://lorempixel.com/800/400/food/3"></a>
              <a class="carousel-item"><img src="https://lorempixel.com/800/400/food/4"></a>
          </div>

          <div class ="row2" id="row2">
            <h2 id="row2title">Featured Listings</h2>
          </div>

          <div class="row3">
              <div class="carousel" id="homeSearch">
  
                  <div class="carousel-item">
                    <div class="card sticky-action">
                      
                               
                      <div class="card-image "  >
                      
                        <img src="https://images.pexels.com/photos/218724/pexels-photo-218724.jpeg?h=350&auto=compress&cs=tinysrgb" 
                             >  </img>
              
                            <span class="card-title">Card Title</span>
                        <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons"  >navigate_next</i></a>
                      </div>
                        <div class="card-content">
                        <p>I am a very simple card.</p>
                      </div>
                      <div class="card-action">
                        <a href="#">This is a link</a>
                      </div>
                    </div>
                  </div>
                  
                  <div class="carousel-item">
                    <div class="card">
                      <div class="card-image">
                        <img src="https://images.pexels.com/photos/160933/girl-rabbit-friendship-love-160933.jpeg?h=350&auto=compress&cs=tinysrgb">
                         <span class="card-title">
                        This is a Title
                      </span>
                      </div>
                     
                       <span class="card-content">
                        This is a content
                      </span>
                      <div class="card-action">
                        <a href="#">This is a link</a>
                      </div>
                    </div>
                  </div>
                  
                  <div class="carousel-item">
                    <div class="card">
                      <div class="card-image">
                        <img src="https://images.pexels.com/photos/160699/girl-dandelion-yellow-flowers-160699.jpeg?h=350&auto=compress&cs=tinysrgb">
                        
                          <span class="card-title">
                        This is a Title
                      </span>
                      </div>
                      
                       <span class="card-content">
                        This is a content
                      </span>
                      <div class="card-action">
                        <a href="#">This is a link</a>
                      </div>
                    </div>
                  </div>
                  
                  <div class="carousel-item">
                    <div class="card">
                      <div class="card-image">
                        <img src="https://images.pexels.com/photos/573299/pexels-photo-573299.jpeg?h=350&auto=compress&cs=tinysrgb">
                          <span class="card-title">
                        This is a Title
                      </span>
                      </div>
                         <span class="card-content">
                        This is a content
                      </span>
                      <div class="card-action">
                        <a href="#">This is a link</a>
                      </div>
                    </div>      
                  </div>
                  
                </div>
          </div>        
  </body>
  <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <p class="grey-text text-lighten-4">
                Liberty Core Real Estate
                14301 FNB Parkway Ste. 100
                Omaha, NE 68154                  
                <i class="material-icons" id="footer-email">email</i>
                <a class="waves-effect waves-light btn-floating social facebook">
                    <i class="fa fa-facebook"></i> Sign in with facebook</a>                     
              </p>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        ©  Liberty Core Real Estate. All rights reserved 2018.
        </div>
      </div>
    </footer>
</html>

<!-- Application.html.erb -->

<!DOCTYPE html>
<html>
  <head>
    <title>LibertyCore</title>
    <%= csrf_meta_tags %>
    <link href="https://fonts.googleapis.com/icon?family=Material\Icons" rel="stylesheet">
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

//Application JS

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require jquery_ujs
//= require materialize-sprockets
//= require materialize/extras/nouislider
//= require index.js

【问题讨论】：

您是否在浏览器检查器的控制台上收到任何错误？

标签： javascript html ruby-on-rails materialize

【解决方案1】：

您的application.scss 和layouts/application.html.erb 没问题。

我会将您的自定义 JS 代码放在 application.js 中，并以不同的方式组织需求，其中 jquery 在 rails-ujs 之后立即被触发，然后是 materialize，如下所示：

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

$(document).ready(function(){
    $('#form').carousel();
    $('#homeSearch').carousel();
  });

$('.carousel.carousel-slider').carousel({fullWidth: true});

setInterval(function(){
    $('#form').carousel('next');
  }, 5000);

【讨论】：