我该把jQuery代码放在Ruby on Rails应用程序的哪里？

Question

我该把jQuery代码放在Ruby on Rails应用程序的哪里？

5

我对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

Gemfile:

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" 的

元素。以下是我的测试 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中使用第二个参数来控制透明度，但是它不支持。

- SinFulNard

1

你读过这个吗？http://guides.rubyonrails.org/asset_pipeline.html - Tobias Cohen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jay Truluck · Accepted Answer

您应该在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);
    });
});

请注意关闭);。