【问题标题】：The right way to include page-specific JavaScript in Rails在 Rails 中包含特定于页面的 JavaScript 的正确方法
【发布时间】：2014-04-28 14:12:00
【问题描述】：

我想包含这个，例如：

jQuery(document).ready(function($) {
    $('#my-modal').modal(options)
});

在 Rails 应用中的一个特定位置。在我的情况下，该文件称为views/modals/mymodal.html.erb。那里也只有那里。

如果不将它放在所有页面上，我无法弄清楚如何做到这一点，如果我将它放在资产中会发生这种情况。

【问题讨论】：

【解决方案1】：

这些是一些有用的技巧

#1 带文件 js

为您的 javascript 创建文件 your.js
在您的特定布局上调用文件your.js
在application.js 上删除//= require_tree .
添加 your.js 到资产编译 on config/application.rb : config.assets.precompile += %w( your.js )

#2 放入特定文件非布局（不推荐）

把你的js脚本和javascript标签放在mymodal.html.erb上

将您的 js 脚本放入 layout/yourlayout.html.erb 并使用 if.. else.. 逻辑。

示例：

 <% if current_page?(yourspecific_path) %>
  <script language="text/javascript">
   your javascript here ..
  </script>
 <% end %>

阅读更多herecurrent_page?

或者使用request.fullpath获取当前完整路径

示例：

 <% if request.fullpath == yourspecific_path %>
  <script language="text/javascript">
   your javascript here ..
  </script>
 <% end %>

阅读更多here 关于request.fullpath

如果您希望将脚本放入文件 .js

，您也可以组合 #1 和 #3

干杯

【讨论】：

【解决方案2】：

鉴于您要包含的 JS 文件名为 my_modal.js：

将您的JS 文件放在assets/javascripts 中的某个目录中 assets/javascripts，例如application。
在application.js 中将//= require_tree . 行更改为//= require_tree application（它会阻止在每一页上加载my_modal.js）。
将您的my_modal.js 放入assets/javasctripts
在您的application.rb 中将my_modal.js 添加到config.assets.precompile 数组(config assets.precompile += ['my_modal.js'])。
将javascript_include_tag 'my_modal' 放入您希望包含此文件的视图中

您可以去Rails guides参考。

【讨论】：

【解决方案3】：

其中一个解决方案是将我们的 javascript 插入到它自己的文件中：Reference Link

例如：

// app/assets/javascripts/alert.js

alert("My example alert box.");

并且只在我们希望它执行的视图中包含这个文件：

<%# app/views/page/contact.html.erb %>
<%= javascript_include_tag "alert" %>
<h1>Contact</h1>
<p>This is the contact page</p>

并且不要忘记将新文件包含在要编译的文件列表中：

# config/environments/production.rb
config.assets.precompile += %w( alert.js )

【讨论】：

【解决方案4】：

聚会迟到了，但对于今天看到这个的人来说，我想我想出了更好的东西。

有了这个，你可以编写如下代码：

class Post {
  controller() {
    // Runs on every action
  }
  index() {
    // Runs on just the index action
  }
}

Punchbox.on('Posts', Post);

（您也可以创建一个对象而不是一个类。请参阅文档）

【讨论】：

【解决方案5】：

jquery-readyselector 是一个插件，“扩展 $().ready() 为页面特定脚本提供方便的语法”

创建一些 CSS 类

<body class="<%= controller_name %> <%= action_name %>">

将您的 javascript 范围限定到您的页面

$("#my-modal").ready(function() {
  $('#my-modal').modal(options)
});

【讨论】：