在 ruby on rails 视图中使用 javascript

Question

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

我所有的图像、css 和 javascripts 都位于 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 标记之前的两个 script 标记之间。 篇幅很长，所以暂时省略了。

我知道 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
 */

Answer 1

包含 javascript 的 Railsy 方法是使用：

<%= javascript_include_tag( 'your_script' ) %>

更多文档在这里： http : //apidock.com/rails/ActionView/Helpers/AssetTagHelper/javascript_include_tag

application.js 只是一个将与资产管道一起预编译的文件列表，因此您也可以在其中包含脚本，但如果您只想将脚本添加到特定视图，这是要走的路。

Answer 2

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

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

lib/assets用于您自己的库代码，这些代码并不真正适合应用程序的范围或那些跨应用程序共享的库。

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

Rails 使用链轮作为资产管道——链轮获取你所有的脚本，并在生产中连接和缩小它们——这对于良好的性能至关重要。

所以首先将所有这些库移动到/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作用是为开发中的链轮清单中的每个文件创建一个单独的脚本/链接标记，以便您获得可用的行号进行调试。 在生产中，它们链接到一个带有指纹的串联缩小版本，这有助于避免缓存问题。

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

如果您想顽固地手动编写脚本标签，则需要将您的资产放在/public/assets 。

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

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

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

在 ruby on rails 视图中使用 javascript

问题描述

2 个解决方案

解决方案1
1 2015-07-23 17:08:52

解决方案2
1 2015-07-23 17:22:52

在 ruby​​ on rails 视图中使用 javascript

问题描述

2 个解决方案

解决方案1 1 2015-07-23 17:08:52

解决方案2 1 2015-07-23 17:22:52

在 ruby on rails 视图中使用 javascript

解决方案1
1 2015-07-23 17:08:52

解决方案2
1 2015-07-23 17:22:52