我应该将我的jQuery代码放在Ruby on Rails应用程序中的哪个位置？

我是RoR的新手，对jQuery来说还是个新手。 目前，我有一个工作的RoR网站作为学习平台。 我想包括一些jQuery基本function来扩展我的学习（.mouseenter（）,.。hover（）,. .fadeIn（）等）。

让我用一些代码设置场景（我已经剪断了部分以保持简短）：

$ ruby -v ruby 1.8.7 (2011-06-30 patchlevel 352) [i686-linux] $ rails -v Rails 3.2.8 

的Gemfile：

 gem 'jquery-rails' 

配置/ routes.rb文件：

 root to: 'static_pages#home' 

应用程序/控制器/ static_pages_controller.rb：

 def home @Presents = Present.all.reverse.take(20) end 

应用程序/视图/布局/ application.html.erb：

      "all" %>      
   
   

应用程序/资产/ Java脚本/ application.js中：

 //= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . 

应用程序/视图/ static_pages / home.html.erb：

 
 
Heading
 
  

应用程序/视图/共享/ _list.html.erb：

应用程序/视图/共享/ _list_item.html.erb：

 
 <ul id="">  Some content here   

理想情况下，我希望我的jQuery以id="present"来实现

。 这是我的测试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/目录？

从我的渲染网站页面 – 有没有办法检查我的jQuery是否被包含和执行？ 我觉得我当前的阻塞点是我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不接受第二个不透明度的参数。

Answer 1

您应该在与视图关联的控制器之后的app/assets/javascripts/ name中创建一个文件，例如对于名为home的控制器，它将是： app/assets/javascripts/home.js然后在您的application.js文件中将其包含在资产管道中，如下所示：

 //= require jquery //= require jquery_ujs //= require bootstrap //= require home 

但是因为你已经有了//=require tree . 对于application.js的上述修改不应该是必要的，但我建议如上所述并单独包含所有文件，以便您可以更好地控制何时包含JS。

编辑：另外，我建议您将要使用的绑定从ID更改为要重用此function的类。

出于测试目的，查看JS是否正在执行，您可以添加如下内容：

 $(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，你当然不应该把这些留在你的代码中。

另外，在第二次看JS之后你可能想尝试这样的事情：

 $(document).ready(function(){ $('#present').mouseenter(function(){ $(this).fadeIn('fast',1); }).mouseleave(function(){ $(this).fadeIn('fast',0.5); }); }); 

注意结束);