在 Rails 中包含特定于页面的 JavaScript 的正确方法

The right way to include page-specific JavaScript in Rails

本文关键字：JavaScript 方法 于页面 Rails 包含特      更新时间：2023-09-26

我想包括这个，例如：

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

在 rails 应用程序中的一个特定位置。在我的例子中，该文件称为views/modals/mymodal.html.erb。那里，只有那里。

如果不将其放在所有页面上，我就无法弄清楚如何做到这一点，就像我将其放入资产中一样。

这些是一些有用的技巧

#1 与文件 js

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

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

将带有JavaScript标签的JS脚本放在mymodal.html.erb上

#3 使用如果..还。。

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

例：

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

在此处阅读有关current_page?的更多信息

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

例：

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

在此处阅读有关request.fullpath的更多信息

如果您希望将脚本放入文件.js，也可以组合 #1 和 #3

干杯

给定要包含的JS文件名为my_modal.js：

  1. 将放置在assets/javascripts中的JS文件放在 assets/javascripts，例如application。

  2. 将行//= require_tree .更改为application.js //= require_tree application(它会阻止在每个页面上加载my_modal.js(。

  3. 将您的my_modal.js放在assets/javasctripts

  4. 将my_modal.js添加到application.rb中的数组(config assets.precompile += ['my_modal.js'](config.assets.precompile。

  5. 将javascript_include_tag 'my_modal'放在要包含此文件的视图中

您可以转到 Rails 指南作为参考。

解决方案之一是将我们的 javascript 插入到它自己的文件中： 参考链接

例如：

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 )

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

用于导轨的打孔箱宝石

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

class Post {
  controller() {
    // Runs on every action
  }
  index() {
    // Runs on just the index action
  }
}
Punchbox.on('Posts', Post);

(您也可以创建对象而不是类。 请参阅文档(

我在这里写得更深入：https://kierancodes.com/blog/page-specific-javascript-in-rails-4

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

  1. 安装 jquery-readyselector

  2. 创建一些 CSS 类

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

  3. 将 JavaScript 的范围限定到您的页面

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

此答案中的更多信息 如何加载页面特定的 rails 4 js 文件？

相关文章：