Jquery 在 Rails 中不使用 Sprockets

Question

这是我第一次尝试将 Jquery 脚本写入我的 rails 项目。该项目正在使用 Heroku 进行生产。我被困了超过 24 小时，几乎要疯了。我能够运行 bootstrap 和 bootstrap javascript 组件就好了。我的 .scss 样式表加载没有任何问题。

app/assets/javascripts/articles.js（这是我的确切文件，我需要脚本括号吗？）

$('#myCarousl').css('border-color', 'red');

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag    'application', media: 'all', 
                                              'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
      <div class="container-fluid">
        <% flash.each do |message_type, message| %>
          <div class="alert alert-<%= message_type %>"><%= message %></div>
        <% end %>
        <%= debug(params) if Rails.env.development? %>
        <%= yield %>
        </div>
   </body>
</html>

app/assets/javascripts/application.js

//= require social-share-button
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

Gemfile

source 'https://rubygems.org
gem 'rails',                   '4.2.2'
gem 'bootstrap-sass',          '3.2.0.0'
gem 'bcrypt',                  '3.1.7'
gem 'faker',                   '1.4.2'
gem 'carrierwave', github: 'carrierwaveuploader/carrierwave'
gem 'mini_magick',             '3.8.0'
gem 'fog',                     '1.36.0'
gem 'will_paginate',           '3.0.7'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'sass-rails',              '5.0.2'
gem 'uglifier',                '2.5.3'
gem 'coffee-rails',            '4.1.0'
gem 'jquery-rails',            '4.0.3'
gem 'turbolinks',              '2.3.0'
gem 'jbuilder',                '2.2.3'
gem 'sdoc',                    '0.4.0', group: :doc
gem 'fog-aws'
gem 'activerecord-reputation-system', require: 'reputation_system'
gem 'social-share-button', '~> 0.1.6'

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem "spring", group: :development
end

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
  gem 'puma',           '2.11.1'
end

config/initializers/assets.rb

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

config/environments/production.rb

 Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Enable Rack::Cache to put a simple HTTP cache in front of your application
  # Add `rack-cache` to your Gemfile before enabling this.
  # For large-scale production use, consider using a caching reverse proxy like
  # NGINX, varnish or squid.
  # config.action_dispatch.rack_cache = true

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # Asset digests allow you to set far-future HTTP expiration dates on all assets,
  # yet still be able to expire them through the digest params.
  config.assets.digest = true

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb



    # Specifies the header that your server uses for sending files.
      # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
      # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

      # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
      config.force_ssl = true

      # Use the lowest log level to ensure availability of diagnostic information
      # when problems arise.
      config.log_level = :debug

      # Prepend all log lines with the following tags.
      # config.log_tags = [ :subdomain, :uuid ]

      # Use a different logger for distributed setups.
      # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)

      # Use a different cache store in production.
      # config.cache_store = :mem_cache_store

      # Enable serving of images, stylesheets, and JavaScripts from an asset server.
      # config.action_controller.asset_host = 'http://assets.example.com'

      # Ignore bad email addresses and do not raise email delivery errors.
      # Set this to true and configure the email server for immediate delivery to raise delivery errors.
      # config.action_mailer.raise_delivery_errors = false

      # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
      # the I18n.default_locale when a translation cannot be found).
      config.i18n.fallbacks = true

      # Send deprecation notices to registered listeners.
      config.active_support.deprecation = :notify

      # Use default logging formatter so that PID and timestamp are not suppressed.
      config.log_formatter = ::Logger::Formatter.new

      # Do not dump schema after migrations.
      config.active_record.dump_schema_after_migration = false

    end

Answer 1

该 js 可能在页面加载之前正在执行。

在您的 articles.js 中尝试这样的事情：

$( document ).ready(function() {
    $('#myCarousl').css('border-color', 'red');
});

该功能块中的任何内容都将在页面加载后执行。

Answer 2

相信你会在这个post中找到你的答案。

根据 RailsGuides，Turbolinks 会覆盖正常的页面加载过程，因此不会触发 "ready" 事件。尝试：

$(document).on('page:change', function () {
   $('#myCarousl').css('border-color', 'red');
});

Jquery 在 Rails 中不使用 Sprockets

Jquery not working with Sprockets in Rails

javascript

jquery

ruby-on-rails

heroku

sprockets