我应该将jQuery代码放在Ruby on Rails应用程序中的什么位置? [英] Where should I place my jQuery code in my Ruby on Rails applications?
问题描述
我对RoR并不熟悉，而对jQuery则相当陌生.目前，我有一个有效的RoR网站作为学习平台.我想包括一些jQuery基本功能以扩展我的学习范围(.mouseenter()、. hover()、. fadeIn()等).
I'm partially new to RoR and fairly new to jQuery. Currently, I have a working RoR site as a learning platform. I want to include some jQuery basic features to expand my learning (.mouseenter(), .hover(), .fadeIn() etc).
让我用一些代码来设置场景(我已经摘录了一些部分以使其简短):
Let me set the scene with some code (I've snipped parts to keep it short):
$ ruby -v
ruby 1.8.7 (2011-06-30 patchlevel 352) [i686-linux]
$ rails -v
Rails 3.2.8
宝石文件:
gem 'jquery-rails'
config/routes.rb:
config/routes.rb:
root to: 'static_pages#home'
app/controllers/static_pages_controller.rb:
app/controllers/static_pages_controller.rb:
def home
@Presents = Present.all.reverse.take(20)
end
app/views/layouts/application.html.erb:
app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<div class="container-narrow">
<%= render 'layouts/header' %>
<%= yield %>
</div>
</body>
</html>
app/assets/javascripts/application.js:
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
app/views/static_pages/home.html.erb:
app/views/static_pages/home.html.erb:
<div class="jumbotron">
<h1>Heading</h1>
</div>
<%= render 'shared/list' %>
app/views/shared/_list.html.erb:
app/views/shared/_list.html.erb:
<% if @Presents.any? %>
<%= render partial: 'shared/list_item', collection: @Presents %>
<% end %>
app/views/shared/_list_item.html.erb:
app/views/shared/_list_item.html.erb:
<div id="present">
<ul id="<%= list_item.id %>">
<span class="content">
Some content here
</span>
</div>
理想情况下，我希望我的jQuery使用id="present"来影响<div>.这是我的测试jQuery:
Ideally, I want my jQuery to effect the <div> with id="present". Here is my test jQuery:
$(document).ready(function(){
$('#present').mouseenter(function(){
$(this).fadeIn('fast',1);
}
$('#present').mouseleave(function(){
$(this).fadeIn('fast',0.5);
}
});
当前，我已经存储了上面的app/views/static_pages/home.js.erb，什么都没有发生.这是合适的位置吗?还是应该将其移至app/views/shared/目录?
Currently, I have the above stored app/views/static_pages/home.js.erb and nothing happens. Is this an appropriate location? Or should I shift it to the app/views/shared/ directory?
在我呈现的网站页面上-有没有办法检查是否包含并执行了我的jQuery?我觉得我当前的阻止点是home.js.erb的位置.
From my rendered site page - is there a way to check if my jQuery is being included and executed? I feel my current blocking point is the location of my home.js.erb.
在我的jQuery中检测到错误-以下已更正:
jQuery:
$(document).ready(function(){
$('#present').mouseenter(function(){
$(this).fadeTo('fast',1);
});
$('#present').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
并正确使用fadeTo. fadeIn不像我尝试的那样接受第二个不透明性参数.
and correct use of fadeTo. fadeIn doesn't accept a second argument for opacity as I was trying.
推荐答案
您应在与视图关联的控制器之后，在app/assets/javascripts/名称内创建一个文件，例如对于名为home的控制器，该文件应为: app/assets/javascripts/home.js，然后在您的application.js文件中，将其按如下方式包含到资产管道中:
You should make a file within app/assets/javascripts/ name after the controller that the view is associated with, for example for a controller named home it would be: app/assets/javascripts/home.js then within your application.js file include it into the asset pipeline as so:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require home
但是，由于您已经具有//=require tree .，对上述application.js所做的修改没有必要，但是我建议如上所述进行操作，并将所有文件单独包含在内，以便您可以更好地控制何时包含JS. .
But since you already have //=require tree . the above modification to application.js should not be necessary but I would suggest doing it as above and include all of your files singularly so that you can have more control over when your JS is included.
另外，如果您想重用此功能，我建议将您正在使用的绑定从ID更改为Class.
Also, I would suggest changing the binding you are using from an ID to a Class incase you want to reuse this functionality.
出于测试目的，以查看JS是否正在执行，您可以添加以下内容:
For Testing purposes to see if the JS is being executed you can add something like:
$(document).ready(function(){
$('#present').mouseenter(function(){
alert("MouseEnter!"); // This will create an alert box
console.log("MouseEnter!"); // This will log to the JS console on your browser which is a bit nicer to read than alerts, you do not need both, just preference
$(this).fadeIn('fast',1);
}
$('#present').mouseleave(function(){
alert("MouseLeave!"); // This will create an alert box
console.log("MouseLeave!");
$(this).fadeIn('fast',0.5);
}
});
这只是为了快速测试JS，您当然不应将它们留在您的代码中.
This is only to test the JS quick, you should never leave these in your code of course.
另外，在再次查看JS之后，您可能想要尝试这样的事情:
Also, after taking a second look at the JS you may want to try something like this:
$(document).ready(function(){
$('#present').mouseenter(function(){
$(this).fadeIn('fast',1);
}).mouseleave(function(){
$(this).fadeIn('fast',0.5);
});
});
注意结账);
这篇关于我应该将jQuery代码放在Ruby on Rails应用程序中的什么位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
