在Rails中的Ruby视图中使用JavaScript [英] Working with javascript in a view in ruby on rails
问题描述
好的，我是一个红宝石用户，不幸的是我将一个项目从Django转移到Ruby on Rails.首先，我正在设置application.html.erb文件，但似乎无法使JavaScript正常工作.图像和css通过，但不是javascript.在Assets目录和application.html.erb文件中都有javascript文件.都没有通过.
Alright guys, I am a ruby noobie here, and I find myself in the unfortunate situation where I am moving a project over from Django to Ruby on Rails. First things first, I am setting up my application.html.erb file, and I cannot seem to get the javascript working. The images and css are coming through, but not the javascript. There are javascript files within the assets directory and within the application.html.erb file. Neither are coming through.
我所有的图像，css和javascript都位于app/assets/中各自的目录中.
All of my images, css, and javascripts are located within their respective directories in app/assets/.
我的application.html.erb文件头标记:
My application.html.erb file head tag:
<!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标记之前.它很长，所以我暂时省略了它.
The javascript in question within the application.html.erb file is between two script tags right before the body closing body tag. It's quite lengthy so I omitted it for the time being.
我了解RoR在资产管道方面有一些约定，并且我假设这里缺少一些ruby语法，但是我习惯于仅引用文件路径并使所有工作正常.另外，视图中是否需要一些ruby语法才能在application.html.erb函数中创建javascript?现在，它仅被引用为:
I understand RoR has some conventions as far as the asset pipeline, and I'm assuming I'm missing some ruby syntax here, but I am used to just referencing the file paths and having everything working. Also, Is there some ruby syntax required within the view to make the javascript within the application.html.erb function? Right now it is just referenced as:
<body>
.
.
<script>
.
.
.
</script>
</body>
</html>
谢谢大家！任何帮助表示赞赏.
Thanks guys! Any help is appreciated.
我的application.js文件:
My application.js file:
// 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文件:
application.css file:
/*
* 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
*/
推荐答案
在Rails中，您应该按以下方式组织资产:
In Rails you should organise your assets as follows:
app/assets用于应用程序拥有的资产，例如 自定义图像，JavaScript文件或样式表.lib/assets用于您自己的库代码，但实际上并不适合 在应用程序或那些库的范围内 在应用程序之间共享.vendor/assets用于外部实体拥有的资产，例如JavaScript插件和CSS框架的代码.保持在 请注意，第三方代码还引用了其他文件 由资产管道(图像，样式表等)处理，将 需要重写以使用诸如asset_path之类的帮助器. http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
app/assetsis for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.lib/assetsis for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared across applications.vendor/assetsis for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks. Keep in mind that third party code with references to other files also processed by the asset Pipeline (images, stylesheets, etc.), will need to be rewritten to use helpers like asset_path. http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Rails在资源管道中使用Sprockets-Sprockets提取所有脚本并将它们串联起来并在生产中最小化，这对于提高性能至关重要.
Rails uses Sprockets for an assets pipeline - Sprockets takes all your scripts and concatenates and minifies them in production - which is vital for good performance.
因此，首先将所有这些库移到/vendor/assets，然后可以将它们包含在application.js中.
So first move all those libs to /vendor/assets and then you can include them in your application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-ui
//= require scroll
//...
//= require_tree .
因此，您不会在布局中使用一百万个脚本标签，而是使用
So instead of having a million script tags in your layout you would use
<!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所做的工作是，它们为开发中的链轮清单中的每个文件创建一个单独的脚本/链接标签，以便获得可用的调试行号.在生产中，它们链接到带指纹的缩小版，有助于避免缓存问题.
What the Rails helper methods javascript_include_tag and stylesheet_link_tag do is that they create a separate script/link tag for each file in sprockets manifest in development so that you get a usable line number for debugging. In production they link to a concatenated minified version with a fingerprint which helps avoid cache issues.
虽然一开始听起来可能会令人困惑，但它确实解决了几个真实的单词问题，并且是一个非常可靠的工作流程.花一点时间学习肯定会有所收获.
While this might sound confusing at first it does solve several real word problem and is a pretty solid workflow. And spending a little time learning it will definitely pay off.
如果您想固执并手动编写脚本标签，则需要将资产放置在/public/assets中.
If you want to be stubborn and manually write script tags you will need to place your assets in /public/assets.
此外，视图中是否需要一些红宝石语法才能使 在application.html.erb函数中使用javascript?
Also, Is there some ruby syntax required within the view to make the javascript within the application.html.erb function?
如果您正在谈论内联脚本标记，则不需要特殊的语法.但是将javascript混入您的html中是一种伪劣的做法.
If you are talking about an inline script tag then there is no special syntax required. But mixing javascript into your html is a pretty shoddy practice.
通过javascript_include_tag 'foo'您可以轻松地将脚本包含在单个页面上.
You can easily include a script on a single page by javascript_include_tag 'foo'.
这篇关于在Rails中的Ruby视图中使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
