Question

好吧，伙计们，我在这里是一个红宝石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是在正文结束正文标记之前的两个脚本标记之间。它很长，所以我暂时省略了它。

我理解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适用于您自己的图书馆＆＃39;代码并不适合   进入应用程序的范围或那些库   在应用程序之间共享。

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清单中的每个文件创建单独的脚本/链接标记，以便为调试获取可用的行号。在生产中，它们链接到带有指纹的连续缩小版本，这有助于避免缓存问题。

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

如果您想要顽固并手动编写脚本标记，则需要将资源放在/public/assets中。

此外，视图中是否需要一些ruby语法才能生成 application.html.erb函数中的javascript？

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

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

在轨道上的红宝石视图中使用javascript

2 个答案: