我应该将jQuery代码放在RubyonRails应用程序的何处？_Jquery_Ruby On Rails

我应该将jQuery代码放在RubyonRails应用程序的何处？

jquery ruby-on-rails

我应该将jQuery代码放在RubyonRails应用程序的何处？,jquery,ruby-on-rails,Jquery,Ruby On Rails,我对RoR有些陌生，对jQuery也相当陌生。目前，我有一个RoR网站作为学习平台。我想包括一些jQuery基本特性来扩展我的学习（.mouseenter（）、.hover（）、.fadeIn（）等）让我用一些代码来设置场景（我剪掉了部分以保持简短）：档案： gem 'jquery-rails' config/routes.rb： root to: 'static_pages#home' 应用程序/控制器/静态页面\u controller.rb： def home @Prese

我对RoR有些陌生，对jQuery也相当陌生。目前，我有一个RoR网站作为学习平台。我想包括一些jQuery基本特性来扩展我的学习（.mouseenter（）、.hover（）、.fadeIn（）等）

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

档案：

gem 'jquery-rails'

config/routes.rb：

root to: 'static_pages#home'

应用程序/控制器/静态页面\u controller.rb：

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

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>

<div class="jumbotron">
    <h1>Heading</h1>
</div>
<%= render 'shared/list' %>

<% if @Presents.any? %>
    <%= render partial: 'shared/list_item', collection: @Presents %>
<% end %>

<div id="present">
    <ul id="<%= list_item.id %>">
        <span class="content">
            Some content here
        </span>
</div>

app/views/static_pages/home.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>

<div class="jumbotron">
    <h1>Heading</h1>
</div>
<%= render 'shared/list' %>

<% if @Presents.any? %>
    <%= render partial: 'shared/list_item', collection: @Presents %>
<% end %>

<div id="present">
    <ul id="<%= list_item.id %>">
        <span class="content">
            Some content here
        </span>
</div>

目前，我已经存储了上面的

app/views/static\u pages/home.js.erb

，但什么都没有发生。这是一个合适的位置吗？或者我应该将其转移到

app/views/shared/

目录吗

从我的呈现站点页面-是否有方法检查是否包含并执行了我的jQuery？我觉得我当前的阻塞点是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

在我尝试时不接受第二个不透明参数。

您应该在视图关联的控制器后面的

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更改为类，以防您希望重用此功能

为了测试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);
    });
});

注意关闭

）
谢谢Jason。我换到了这个地方，又试了一次，但没有成功。我的控制器是“static_pages”，但呈现的是一个“共享”文件-名称是否仍然保持为static_pages.js？名称是一个重要的因素吗？这应该是可行的，名称本身并不是真正重要的部分，尽管（它们只是随意的，我为了良好的实践而将其包括在内）主要部分是包含在资产管道中。只要它包含在那里并且您正在使用它，JS就应该包括在内，您能包含application.html.erb文件吗，这样我们就可以看到您在那里包含了什么JS？好的，谢谢您清理命名方案。我保留了这棵树。确保我不会在管道中遗漏它。我已经编辑了整个app/views/layouts/application.html.erb.hmmm，看起来一切都是你所包含的内容，要测试是否正在加载，您可以在自己选择的浏览器中加载页面，然后使用开发人员工具检查页面，查看javascript是否是从服务器返回的application.js文件的一部分。另外，您可能需要尝试添加类似于alert（“MouseEnter”）的内容或console.log（“MouseEnter”）
，以确保在加载JS时事件按预期触发。我将更新我的答案，以获得一个例子：Jason-champ。我们都设法收集了my js中的错误（这些错误也被传播到了您的代码中）。我没有正确关闭我的函数调用！但是你已经证明了设置不是问题所在。我想我与CSS相关的其他东西发生了冲突。非常感谢你的坚持。你读过这篇文章吗？