在 Ruby on Rails 的视图中加载 JavaScript答案

【问题标题】：Loading JavaScript in view in Ruby on Rails在 Ruby on Rails 的视图中加载 JavaScript
【发布时间】：2017-07-29 21:12:35
【问题描述】：

我想在 Ruby on Rails 4.2.0 中使用特定于视图的 JavaScript，所以我想在任何我想加载它的地方动态加载它。我将应该加载的 javascript 文件（headers.js）放在 assets/javascripts 中。我删除了 application.js 文件中的 require 树行。

我已经更新了 application.html.erb

application.html.erb

<!DOCTYPE html>
<html>
   <head>
      <title>Sandbox</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= stylesheet_link_tag params[:controller] %>
      <%= csrf_meta_tags %>
      <%= render 'partials/shim' %>
   </head>
   <body>
      <%= render 'partials/header' %>
      <%= yield :javascript_includes %>
      <%= render 'partials/footer' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   </body>
</html>

我想调用视图顶部的 javascript 文件。

view.html.erb

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "headers.js" %>
<% end %>

我也更新了初始化程序/assets.rb 文件：

Rails.application.config.assets.precompile += %w( headers.js )

由于某种原因，视图的 html 内容将无法加载，并且我在控制台中收到错误：未捕获的 ReferenceError：未定义 jQuery。

为什么它不起作用？我怎样才能做到这一点，我错过了什么？

【问题讨论】：

也许你的文件依赖于 jQuery，并且你试图在 Rails 加载 jQuery 之前加载它，你需要看看改变资源的顺序是否可以工作。
试试<%= javascript_include_tag "headers.js" %> 并重启你的服务器，你会得到什么？

标签： javascript jquery ruby-on-rails view

【解决方案1】：

与其将javascript_includes 传递给yield，不如尝试直接在视图中的任意位置输入所需的javascript 文件，例如：

<%= javascript_include_tag "headers.js" %>
  <div class="vertical-center">
    ...

你在 application.html.erb 中的body 就像：

<%= render 'partials/header' %>
<%= yield %>
<%= render 'partials/footer' %>

您可以将 application.js 文件移到顶部，以保留 Rails“结构”：

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
...

【讨论】：

【解决方案2】：

这应该可行：

在视图中添加

<% content_for(:head) do %>
  <%= javascript_include_tag 'headers.js' %>
<% end %>

在初始化程序/assets.rb 中

Rails.application.config.assets.precompile += %w( headers.js )

【讨论】：