在 ruby on rails 视图中使用 javascript
[英]Working with javascript in a view in ruby on rails
问题描述
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.
好吧，我是这里的 ruby noobie，我发现自己处于不幸的境地，我正在将一个项目从 Django 转移到 Ruby on Rails。 First things first, I am setting up my application.html.erb file, and I cannot seem to get the javascript working.首先，我正在设置我的 application.html.erb 文件，但我似乎无法让 javascript 工作。 The images and css are coming through, but not the javascript.图像和 css 正在通过，但不是 javascript。 There are javascript files within the assets directory and within the application.html.erb file.资产目录和 application.html.erb 文件中有 javascript 文件。 Neither are coming through.两者都没有通过。
All of my images, css, and javascripts are located within their respective directories in app/assets/.我所有的图像、css 和 javascripts 都位于 app/assets/ 中各自的目录中。
My application.html.erb file head tag:我的 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>
The javascript in question within the application.html.erb file is between two script tags right before the body closing body tag. application.html.erb 文件中的 javascript 位于 body 结束 body 标记之前的两个 script 标记之间。 It's quite lengthy so I omitted it for the time being.篇幅很长，所以暂时省略了。
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.我知道 RoR 在资产管道方面有一些约定，我假设我在这里缺少一些 ruby 语法，但我习惯于只引用文件路径并使一切正常。 Also, Is there some ruby syntax required within the view to make the javascript within the application.html.erb function?另外，视图中是否需要一些 ruby 语法来在 application.html.erb 函数中创建 javascript？ Right now it is just referenced as:现在它只是被引用为：
<body>
.
.
<script>
.
.
.
</script>
</body>
</html>
Thanks guys!谢谢你们！ Any help is appreciated.任何帮助表示赞赏。
My application.js file:我的 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 file: 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
*/
2 个解决方案
解决方案1
1 2015-07-23 17:08:52
The Railsy way of including javascript is to use:包含 javascript 的 Railsy 方法是使用：
<%= javascript_include_tag( 'your_script' ) %>
More docs here: http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/javascript_include_tag更多文档在这里： http : //apidock.com/rails/ActionView/Helpers/AssetTagHelper/javascript_include_tag
application.js is just a list of files that will be precompiled with the asset pipeline, so you can include the scripts there as well, but if you just want to add a script to a particular view, this is the way to go. application.js 只是一个将与资产管道一起预编译的文件列表，因此您也可以在其中包含脚本，但如果您只想将脚本添加到特定视图，这是要走的路。
解决方案2
1 2015-07-23 17:22:52
In Rails you should organise your assets as follows:在 Rails 中，您应该按如下方式组织资产：
app/assetsis for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.app/assets用于应用程序拥有的资产，例如自定义图像、JavaScript 文件或样式表。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.lib/assets用于您自己的库代码，这些代码并不真正适合应用程序的范围或那些跨应用程序共享的库。vendor/assetsis for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.vendor/assets用于外部实体拥有的资产，例如 JavaScript 插件和 CSS 框架的代码。 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.
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. Rails 使用链轮作为资产管道——链轮获取你所有的脚本，并在生产中连接和缩小它们——这对于良好的性能至关重要。
So first move all those libs to /vendor/assets and then you can include them in your application.js所以首先将所有这些库移动到/vendor/assets然后你可以将它们包含在你的 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 %>
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. Rails 辅助方法javascript_include_tag和stylesheet_link_tag作用是为开发中的链轮清单中的每个文件创建一个单独的脚本/链接标记，以便您获得可用的行号进行调试。 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.花一点时间学习它肯定会得到回报。
If you want to be stubborn and manually write script tags you will need to place your assets in /public/assets .如果您想顽固地手动编写脚本标签，则需要将您的资产放在/public/assets 。
Also, Is there some ruby syntax required within the view to make the javascript within the application.html.erb function?
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 混合到您的 html 中是一种非常劣质的做法。
You can easily include a script on a single page by javascript_include_tag 'foo' .您可以通过javascript_include_tag 'foo'轻松地在单个页面上包含脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.