在 ruby on rails 的视图中使用 javascript答案

【问题标题】：Working with javascript in a view in ruby on rails在 ruby on rails 的视图中使用 javascript
【发布时间】：2023-03-29 23:46:01
【问题描述】：

好吧，伙计们，我在这里是一个 ruby 新手，我发现自己处于不幸的境地，我将一个项目从 Django 转移到 Ruby on Rails。首先，我正在设置我的 application.html.erb 文件，但我似乎无法让 javascript 工作。图像和 css 正在通过，但不是 javascript。 assets 目录和 application.html.erb 文件中有 javascript 文件。两者都没有通过。

我所有的图片、css 和 javascript 都位于 app/assets/ 中它们各自的目录中。

我的application.html.erb文件头标签：

<!DOCTYPE HTML>
<HTML>
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>The Atmosphere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/assets/atmosphere_favicon.png">
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" type="text/css" href="/assets/profile.css">
<link rel="stylesheet" type="text/css" href="/assets/advanced-slider-base.css">
<link rel="stylesheet" type="text/css" href="/assets/small-round-button.css">
<link rel="stylesheet" media="all" href="/assets/hover.css">


<script type="text/javascript" src="/assets/jquery-1.7.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery-ui.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/scroll.min.js"></script>
<!--<script type="text/javascript" src="js/jquery.transition.min.js"></script>-->
<script type="text/javascript" src="/assets/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="/assets/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="/assets/jquery.advancedSlider.min.js"></script>
<script type="text/javascript" src="/assets/simplyScroll.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery.marquee.js"></script>
<script type="text/javascript" src="/assets/jquery.pause.min.js"></script>
<script type="text/javascript" src="/assets/jquery.webticker.js"></script>
<script type="text/javascript" src="/assets/engine.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/assets/jquery.cookie.js"></script>


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


<!-- start soundmanager2 -->
<!-- demo, make the fonts nicer etc. -->


<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="/assets/flashblock.css" />

<!-- soundmanager required -->
<link rel="stylesheet" type="text/css" href="/assets/360player.css" />
<link rel="stylesheet" type="text/css" href="/assets/360player-visualization.css" />

<!-- sound manager Apache-licensed animation library -->
<script type="text/javascript" src="/assets/berniecode-animator.js"></script>

<!-- soundmanager core stuff -->
<script type="text/javascript" src="/assets/soundmanager2.js"></script>
<script type="text/javascript" src="/assets/360player.js"></script>

</head>

application.html.erb 文件中的相关javascript 位于body 结束body 标记之前的两个脚本标记之间。篇幅比较长，暂时省略了。

我了解 RoR 在资产管道方面有一些约定，我假设我在这里缺少一些 ruby 语法，但我习惯于仅引用文件路径并让一切正常。此外，视图中是否需要一些 ruby 语法才能在 application.html.erb 函数中创建 javascript？现在它只是被引用为：

   <body>
     .
     .
      <script>
        .
        .
        .

      </script>
   </body>
</html>

谢谢各位！任何帮助表示赞赏。

我的 application.js 文件：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

application.css 文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

【问题讨论】：

标签： javascript ruby-on-rails asset-pipeline

【解决方案1】：

包含 javascript 的 Railsy 方法是使用：

<%= javascript_include_tag( 'your_script' ) %>

application.js 只是将使用资产管道预编译的文件列表，因此您也可以在其中包含脚本，但如果您只想将脚本添加到特定视图，这是一种方法去吧。

【讨论】：

非常好，所以我会用上面添加的代码替换语法.直接在视图中的代码怎么样。我读到您可以创建一个单独的文件并像我们上面那样复制和粘贴并包含它，但是如果我想将它保留在 application.html.erb 文件中，语法会是什么？
语法没有变化。只要您在视图中使用它，javascript_include_tag 就会自动假定该文件位于 assets/javascripts

【解决方案2】：

在 Rails 中，您应该按如下方式组织资产：

app/assets 用于应用程序拥有的资产，例如自定义图像、JavaScript 文件或样式表。

lib/assets 用于您自己的库的代码，但实际上并不适合进入应用程序或那些库的范围跨应用共享。

vendor/assets 用于外部实体拥有的资产，例如 JavaScript 插件和 CSS 框架的代码。保持在请注意引用其他文件的第三方代码由资产管道（图像、样式表等）处理，将需要重写以使用像asset_path这样的助手。 http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

Rails 将 Sprockets 用于资产管道 - Sprockets 会获取您的所有脚本并在生产中连接并缩小它们 - 这对于良好的性能至关重要。

所以首先将所有这些库移动到/vendor/assets，然后您可以将它们包含在您的 application.js 中

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-ui
//= require scroll
//...
//= require_tree .

因此，您不会在布局中使用一百万个脚本标签

<!DOCTYPE HTML>
<HTML>
  <head>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <title>The Atmosphere</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Rails 辅助方法javascript_include_tag 和stylesheet_link_tag 所做的是，它们为开发中的 sprockets manifest 中的每个文件创建一个单独的脚本/链接标记，以便您获得一个可用于调试的行号。在生产中，它们链接到带有指纹的级联缩小版本，这有助于避免缓存问题。

虽然这听起来可能令人困惑，但它确实解决了几个实际的单词问题，并且是一个非常可靠的工作流程。花一点时间学习它肯定会有所收获。

如果你想固执并手动编写脚本标签，你需要将你的资产放在/public/assets。

另外，视图中是否需要一些 ruby 语法来制作 application.html.erb 函数中的javascript？

如果您谈论的是内联脚本标签，则不需要特殊语法。但是将 javascript 混合到您的 html 中是一种非常糟糕的做法。

您可以通过javascript_include_tag 'foo' 在单个页面上轻松包含脚本。

【讨论】：

好的，所以我已将所有 javascript 资产移至 vendor 并将 //= require 'foo' 语法添加到 application.js 文件，但我仍然无法让我的内联 javascript 工作在 application.html.erb 文件中。我已经尝试将它移动到它自己的 js 文件中，并且我也尝试过像下面这样包装脚本标签，但没有运气。有什么理由吗？ <%= javascript_tag do %> (javascript) <% end %>
您是否在内联 javascript 中或沿途某处出现语法错误？检查浏览器控制台。