如何在 Ruby on Rails 中使用 Javascript？

Question

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

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

应用程序.js

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

页面.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>

原文由 Martin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你找到了吗？

在哪里粘贴你的 JavaScript 。

在哪里粘贴你的 JavaScript

无论您是使用 Rails 资产管道还是将 <script> 标记直接添加到视图，您都必须选择将任何本地 JavaScript 文件放在哪里。

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

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

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

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

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

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

神秘的清单

JavaScript 资产文件夹中有两种文件：

• 普通的 JavaScript 文件
• 清单文件

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

清单 文件与普通 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 脚本。

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

希望这可以帮助。

原文由 Iqlaas Ismail 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您使用的是 Rails 5，您可能需要通过添加将 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 函数将有助于调试以查看事件是否被触发。

原文由 Andy 发布，翻译遵循 CC BY-SA 3.0 许可协议