如何在 Ruby on Rails 中使用 Javascript？

Question

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

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

application.js

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

page.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>

Answer 1

你找到了吗？
Where to Stick Your JavaScript.

在哪里粘贴你的 JavaScript

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

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

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

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

• 为您的应用程序创建的 JavaScript 使用 app/assets/javascripts。
• 将lib/assets/javascripts 用于许多应用程序共享的脚本（但如果可以，请使用 gem）。
• 使用vendor/assets/javascripts 获取来自其他开发人员的 jQuery 插件等副本。

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

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

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

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

Manifest 文件具有与普通 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 脚本中。

希望这会有所帮助。

Answer 2

$(document).ready() 需要一个函数，而不是函数调用的结果。相反，您调用main() 之前 DOMReady 事件，并将undefined 传递给$(document).ready() 函数。

应该是这样的：

$(document).ready(main);

Answer 3

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

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

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

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

gem 'jquery-rails'

然后运行bundle install

然后在您的application.js 中写下以下内容：

//= require jquery 
//= require jquery_ujs 

Answer 4

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

gem 'jquery-rails'

在您的 Gemfile 中，以及添加

//= jquery

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

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

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

将console.log 添加到main 函数将有助于调试以查看事件是否被触发。