在 Rails 3 应用程序中添加特定于页面的 JavaScript 的最佳方法？

javascript ruby-on-rails ruby-on-rails-3

2022-08-30 02:28:21

Rails 3有一些不显眼的JavaScript，这很酷。

但是我想知道为特定页面添加其他JavaScript的最佳方法是什么。

例如，我以前可能做过的地方：

<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>

我们现在可以通过类似的东西使它变得不显眼

<%= f.radio_button :rating, 'positive' %>

# then in some other file
$('user_rating_positive').click(function() {
  $('some_div').show();
}

所以我想我的问题是在哪里/如何包含JavaScript？我不想填满文件，因为这个JavaScript只适用于这个视图。我应该以某种方式为每个页面包含一个自定义JavaScript文件，还是将其粘贴到标头查找的实例变量中？application.js

答案 1

我喜欢做的是将每个视图的Javascript包含在一个块中，然后在应用程序布局中包含该块。例如content_for :headyield

如果它很短，那么：

<% content_for :head do %>
  <script type="text/javascript">
    $(function() {
      $('user_rating_positve').click(function() {
        $('some_div').show();
      }
    });
  </script>
<% end %>

或者，如果更长，则：

<% content_for :head do %>
  <script type="text/javascript">
    <%= render :partial => "my_view_javascript"
  </script>
<% end %>

然后，在布局文件中

<head>
  ...
  <%= yield :head %>
</head>

答案 2

如果你想在一个页面上包含javascript，你当然可以把它包含在内联页面上，但是如果你想对你的javascript进行分组并利用资产管道，缩小的js等，那么可以这样做，并且有额外的js资产，这些资产被组合并仅在特定页面上加载，方法是将js拆分为仅适用于站点的某些控制器/视图/部分的组。

将资产中的 js 移动到文件夹中，每个文件夹都有一个单独的清单文件，因此，如果您有一个仅在后端使用的管理 js 库，则可以执行以下操作：

资产
- javascripts
  - 管理
    - ...断续器
  - 管理员.js（管理员组的清单）
  - 应用程序.js（应用全局组的清单）
  - 全球
    - ...断续器

在现有应用程序中.js

//= require jquery
//= require jquery_ujs
//= require_tree ./global // requires all js files in global folder

在新的管理员.js清单文件中

//= require_tree ./admin // requires all js files in admin folder

确保通过编辑config/production.rb加载这个新的js清单

config.assets.precompile += %w( admin.js )

然后调整页面布局，以便您可以为页面标题添加一些额外的js：

<%= content_for :header %>

然后在要包含此特定 js 组（以及普通应用程序组）和/或任何特定于页面的 js、css 等的视图中：

<% content_for :header do %>
  <%= javascript_include_tag 'admin' %>  
<% end %>

当然，您可以使用css做同样的事情，并以类似的方式对其进行分组，以便仅应用于站点的某些区域。