在RubyonRails的视图中使用javascript_Javascript_Ruby On Rails_Asset Pipeline

在RubyonRails的视图中使用javascript

javascript ruby-on-rails

在RubyonRails的视图中使用javascript,javascript,ruby-on-rails,asset-pipeline,Javascript,Ruby On Rails,Asset Pipeline,好了，伙计们，我是一个ruby noobie，我发现自己处于一个不幸的境地，我正在将一个项目从Django转移到ruby on Rails。首先，我正在设置application.html.erb文件，而我似乎无法让javascript正常工作。图像和css正在通过，但javascript没有。assets目录和application.html.erb文件中都有javascript文件。两者都没有通过我的所有图像、css和Java脚本都位于app/assets/中各自的目录中 My appli

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

我的所有图像、css和Java脚本都位于app/assets/中各自的目录中

My 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.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的最佳方式是使用：

<%= javascript_include_tag( 'your_script' ) %>

更多文档请点击此处：

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

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

```
app/assets
```
用于应用程序拥有的资产，例如自定义图像、JavaScript文件或样式表
```
lib/assets
```
是为您自己的库编写的代码，它实际上并不适合您进入应用程序的范围或那些跨应用程序共享
```
vendor/assets
```
用于外部实体拥有的资产，例如JavaScript插件和CSS框架的代码。（使）留在家里请注意，第三方代码还引用了其他文件由资产管道处理（图像、样式表等），将需要重写以使用诸如asset_path之类的帮助程序。

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

因此，首先将所有这些lib移动到

/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\u include\u tag

和

stylesheet\u link\u tag

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

虽然这听起来可能让人困惑，但它确实解决了几个实际的单词问题，而且是一个相当可靠的工作流程。花点时间学习肯定会有回报的

如果您想顽固地手动编写脚本标记，则需要将资产放在

/public/assets

中

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

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

您可以通过

javascript\u include\u tag'foo'

在单个页面上轻松包含脚本，因此我将用您上面添加的代码替换语法。那么直接在视图中的代码呢。我读到你可以像上面那样创建一个单独的文件，复制粘贴并包含它，但是如果我想把它保存在application.html.erb文件中，语法会是什么呢？语法没有变化。只要您在视图中使用它，javascript_include_标记将自动假定文件位于assets/javascriptsAlright中，因此我已将所有javascript资产移动到vendor，并将//=require'foo'语法添加到application.js文件中，但我仍然无法使内联javascript在application.html.erb文件中工作。我已经尝试将它移动到它自己的js文件中，我也尝试过像下面那样包装脚本标记，但没有成功。有什么原因吗<代码>（javascript）在内联javascript中或在过程中的某个地方是否存在语法错误？检查浏览器控制台。

//= 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 %>