如何在 Ruby on Rails 中使用 Javascript？

How to use Javascript in Ruby on Rails?

提问by Martin

I think I'm fundamentally misunderstanding how to implement Javascript in my rails app. My understanding was that you throw your Javascript into your application.jsfile and then you can reference elements in your DOM using jQueryin order to make an interactive web page.

我想我从根本上误解了如何在我的 Rails 应用程序中实现 Javascript。我的理解是，您将 Javascript 放入application.js文件中，然后您可以使用引用 DOM 中的元素jQuery来制作交互式网页。

I just checked through all of my code, and it looks clean (posted below in case I'm wrong). My thought is that I may be putting my Javascript in the wrong place, or I'm missing a dependency somewhere? I found other posts to be mostly unhelpful for me. How do I merge Javascript into my app?

我刚刚检查了我的所有代码，它看起来很干净（如果我错了，请在下面发布）。我的想法是我可能将我的 Javascript 放在错误的位置，或者我在某处缺少依赖项？我发现其他帖子对我几乎没有帮助。如何将 Javascript 合并到我的应用程序中？

application.js

应用程序.js

function main() {
  $('.answers-box').hide();
  $('.qaa-box').on('click', function() {
    $(this).next().slideToggle(400);
  });
}
$(document).ready(main());

page.html.erb

页面.html.erb

<div class="qaa-box">
  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
  <p class="answers-box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </p>
</div>

回答by Iqlaas Ismail

Have you found this?
Where to Stick Your JavaScript.

你找到这个了吗？
在哪里粘贴你的 JavaScript。

Where to Stick Your JavaScript

Whether you use the Rails asset pipeline or add a <script>tag directly to a view, you have to make a choice about where to put any local JavaScript file.

We have a choice of threelocations for a local JavaScript file:

• the app/assets/javascriptsfolder
• the lib/assets/javascriptsfolder
• the vendor/assets/javascriptsfolder

Here are guidelinesfor selecting a location for your scripts:

• Use app/assets/javascriptsfor JavaScript you create for your application.
• Use lib/assets/javascriptsfor scripts that are shared by many applications (but use a gem if you can).
• Use vendor/assets/javascriptsfor copies of jQuery plugins, etc., from other developers.

In the simplestcase, when all your JavaScript files are in the app/assets/javascriptsfolder, there's nothing more you need to do.

Add JavaScript files anywhere else and you will need to understand how to modify a manifest file.

Mysterious Manifests
There are two kinds of files in a JavaScript assets folder:

• ordinary JavaScript files
• manifest files
  You can also have CoffeeScriptfiles and ERBfiles which are variations on ordinaryJavaScript files.

Manifestfiles have the same .js file extension as ordinary JavaScript files. Manifest files and ordinary JavaScript files can be combined in a single file. This makes manifest files mysterious, or at least non-obvious.

The default app/assets/javascripts/application.jsfile is a manifest file. It's a manifest file because it contains directives:

//= require jquery  
//= require jquery_ujs  
//= require_tree .

Directives tell Sprockets which files should be combined to build a single JavaScript script. Each file that contains manifest directives becomes a single JavaScript script with the same name as the original manifest file. Thus the app/assets/javascripts/application.jsmanifest file becomesthe application.jsscript.

All scripts in the app/assets/javascriptsfolder are automatically added to the default application.jsscript when the manifest file includes the default //= require_tree .directive.

在哪里粘贴你的 JavaScript

无论您是使用 Rails 资产管道还是<script>直接向视图添加标签，您都必须选择放置任何本地 JavaScript 文件的位置。

我们可以为本地 JavaScript 文件选择三个位置：

• 该app/assets/javascripts文件夹
• 该lib/assets/javascripts文件夹
• 该vendor/assets/javascripts文件夹

以下是为脚本选择位置的指南：

• 使用app/assets/javascriptsJavaScript的您为您的应用程序。
• 使用lib/assets/javascripts了由许多应用程序共享脚本（但使用的宝石，如果你能）。
• 使用vendor/assets/javascripts了jQuery插件等，从其他开发商的副本。

在最简单的情况下，当您的所有 JavaScript 文件都在app/assets/javascripts文件夹中时，您无需再执行任何操作。

在其他任何地方添加 JavaScript 文件，您将需要了解如何修改清单文件。

神秘清单
JavaScript 资产文件夹中有两种文件：

• 普通的 JavaScript 文件
• 清单文件
  您还可以拥有普通JavaScript 文件的变体CoffeeScript文件和文件。ERB

清单文件与普通 JavaScript 文件具有相同的 .js 文件扩展名。清单文件和普通 JavaScript 文件可以合并为一个文件。这使得清单文件变得神秘，或者至少不明显。

默认的app/assets/javascripts/application.js文件是manifest file. 这是一个清单文件，因为它包含指令：

//= require jquery  
//= require jquery_ujs  
//= require_tree .

指令告诉 Sprockets 应该组合哪些文件来构建单个 JavaScript 脚本。每个包含清单指令的文件都成为一个与原始清单文件同名的 JavaScript 脚本。因此，app/assets/javascripts/application.js清单文件变成了application.js脚本。

当清单文件包含默认//= require_tree时，文件app/assets/javascripts夹中的所有脚本都会自动添加到默认application.js脚本中。指示。

Hope this helps.

希望这可以帮助。

回答by Andy

If you're using Rails 5 you may need to add jQuery to your project by adding

如果您使用的是 Rails 5，您可能需要通过添加将 jQuery 添加到您的项目中

gem 'jquery-rails'

gem 'jquery-rails'

in your Gemfile, as well as adding

在您的 Gemfile 中，以及添加

//= jquery

//= jquery

to your app > assets > javascript > application.jsfile.

到您的app > assets > javascript > application.js文件。

Since Rails 5 uses Turbolinks, you may also need to change the listener

由于 Rails 5 使用 Turbolinks，您可能还需要更改侦听器

$(document).readyto $(document).on('turbolinks:load', function(main());

$(document).ready到 $(document).on('turbolinks:load', function(main());

Adding a console.logto the mainfunction will help with debugging to see if the event is being fired.

添加console.log到main功能将有助于调试，看看是否被解雇的事件。

回答by the12

You forgot to add the parentheses after the function main()in document.ready

您忘记main()在 document.ready 中的函数后添加括号

$(document).ready(main();)

In addition to this, try the following:

除此之外，请尝试以下操作：

Add the jquery-railsgem to your Gemfile (place this in your gem file):

将jquery-railsgem添加到您的 Gemfile（将其放在您的 gem 文件中）：

gem 'jquery-rails'

Then run bundle install

然后运行 bundle install

Then write the following in your application.js:

然后在您的application.js.

//= require jquery 
//= require jquery_ujs 

回答by Styx

The $(document).ready()expects a function, not the result of function call. Instead, you're calling main()beforeDOMReadyevent, and passing undefinedinto $(document).ready()function.

该$(document).ready()预期函数，函数调用的不是结果。相反，你打电话main()之前DOMReady事件，并传递undefined到$(document).ready()功能。

It should be like this:

应该是这样的：

$(document).ready(main);