我应该将我的 jQuery 代码放在我的 Ruby on Rails 应用程序中的什么位置？答案

【问题标题】：Where should I place my jQuery code in my Ruby on Rails applications?我应该将我的 jQuery 代码放在我的 Ruby on Rails 应用程序中的什么位置？
【发布时间】：2013-01-17 02:33:25
【问题描述】：

我对 RoR 还很陌生，对 jQuery 也很陌生。目前，我有一个可用的 RoR 站点作为学习平台。我想包含一些 jQuery 基本功能来扩展我的学习（.mouseenter()、.hover()、.fadeIn() 等）。

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

$ 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:

root to: 'static_pages#home'

app/controllers/static_pages_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>

app/assets/javascripts/application.js：

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

app/views/static_pages/home.html.erb：

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

app/views/shared/_list.html.erb：

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

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：

$(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 不接受第二个关于不透明度的参数，因为我正在尝试。

【问题讨论】：

你读过这个吗？ guides.rubyonrails.org/asset_pipeline.html

标签： jquery ruby-on-rails

【解决方案1】：

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

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

但是由于您已经拥有//=require tree .，因此不需要对application.js 进行上述修改，但我建议您按照上述方式进行操作，并单独包含所有文件，以便您可以更好地控制何时包含您的 JS .

编辑：另外，我建议将您使用的绑定从 ID 更改为 Class，以防您想重用此功能。

为了测试目的，查看 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);
    });
});

注意结束);

【讨论】：

谢谢杰森。我转移到这个位置并再次尝试但没有成功。我的控制器是“static_pages”，但呈现“共享”文件 - 名称是否仍保留为 static_pages.js？名字是一个重要因素吗？
这应该可以，但名称本身并不是真正重要的部分（它们只是随意的，我将其包括为良好实践）主要部分是包含在资产管道中。只要它包含在其中并且您正在使用它，就应该包含 JS，您能否包含您的 application.html.erb 文件，以便我们可以看到您在其中包含了什么 JS？
好的，感谢您整理命名方案。我保留了 //=require 树。到位以确保我不会从管道中丢失它。我进行了编辑，包括整个 app/views/layouts/application.html.erb。
hmmm 看起来一切都是您所包含的内容，要测试它是否正在加载，您可以在您选择的浏览器中加载页面，然后使用开发人员工具检查页面并查看 javascript 是否是从服务器返回的 application.js 文件的一部分。此外，您可能想尝试在 mouseenter jQuery 函数中添加 alert("MouseEnter"); 或 console.log("MouseEnter") 之类的内容，以确保在加载 JS 时事件按预期触发。我将更新我的答案以提供示例。
杰森 - 冠军。我们都设法收集了我的 js 中的错误（这些错误也传播到了您的代码中）。我没有正确关闭我的函数调用！但是您已经证明设置不是问题。我想我正在与其他与 CSS 相关的东西发生冲突。非常感谢您在这里的坚持。