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

2023-11-24

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

配置/routes.rb:

root to: 'static_pages#home'

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

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

应用程序/视图/布局/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>

应用程序/资产/javascripts/application.js:

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

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

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

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

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

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

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

理想情况下,我希望我的 jQuery 能够实现<div> with 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正如我所尝试的那样,不接受第二个不透明的论点。


你应该在里面创建一个文件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 更改为类。

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

注意结束语);

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我应该将 jQuery 代码放置在 Ruby on Rails 应用程序中的什么位置? 的相关文章

  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 如何创建与 ActiveResource 对象的 ActiveRecord 关系?

    假设我正在为一家已经拥有 People 应用程序的出版公司编写一个图书馆应用程序 所以在我的图书馆应用程序中我有 class Person lt ActiveResource Base self site http api people m
  • 数据库分片和 Rails

    在 Rails 中处理分片数据库的最佳方法是什么 分片应该在应用层 活动记录层 数据库驱动层 代理层还是其他层处理 各自的优点和缺点是什么 FiveRuns 有一个名为的 gem数据结构 https github com bpot data
  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • 带有附加参数的redirect_to

    我是一个菜鸟 redirect to users url notice Succeed p p 然后我添加一个message它失败了 redirect to users url notice Succeed message test p p
  • JSON 数据中的 jQGrid celledit 显示 URL 未设置警报

    我需要从服务器加载 JSON 并且希望用户能够单击并编辑该值 但是当他们编辑时 它不应该调用服务器 我的意思是我不会立即更新 所以我不想编辑网址 所以我尝试了 ClientArray 但它仍然显示 Url is not set 警报框 但是
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • jQuery,使用 ~ 作为 id 的一部分 - 如何?

    在我的应用程序中 我有一个表单 其中的元素使用特定的约定命名 即它们是路径 其各部分使用 sign 现在我需要通过 id 在 jQuery 中访问其中之一 但失败了 显然 jQuery 将其视为 prev sibling thing 有什么
  • Rails 3:使用 Simple_form 如何创建一个向specialities#create 发布帖子的表单?

    如何使用 Simple form 创建一个向specialities create 发布帖子的表单 我试过这个
  • jqGrid - 使所有列不可排序?

    除了添加之外 有没有办法使网格上的所有列都不可排序sortable false到每一列 我知道您可以在网格级别设置全局选项 但不知道是否可以在 colModel 级别执行此操作 您可以使用 colmodel 模板来实现此目的 cmTempl
  • defaultDate 选项与 setDate 方法之间的差异

    我正在尝试使用jQueryUI DatePicker 我必须了解的主要事情之一是在页面加载时设置日期的方式 经过一些研究后 我发现有两种不同的方法可以做到这一点 using defaultDate option using setDate
  • 使用 AJAX 加载部分视图不起作用

    请原谅我 我是 MVC 和 AJAX 的新手 目前我只是提交一个表单 我想使用表单中的数据使用 ajax 更新部分视图中的表 My UserInfo部分视图如下所示 model IEnumerable
  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • 点击加载谷歌地图

    我想在单击链接后显示 Google 地图 我已经尝试过以下方法 当点击链接时 然后 Insert div与 id 链接后map 使用 jQuery 方法 getScript 加载 Google Maps API 添加谷歌地图到div带身份证
  • 在 CircleCI 中设置 Elasticsearch 和 Ruby on Rails

    我正在尝试在 Rails 应用程序中使用 Elasticsearch 设置 CircleCI 我想已经配置了镜像 但是如何在 CI 中连接到它 到目前为止我已经尝试过 https github com elastic elasticsear
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 有时您可能需要重新启动 Webrick 才能看到所做的更改,这是否正确?

    我听 Kevin Skoglund lynda com 说 养成在开发过程中频繁重新启动 Webrick 的习惯是一个很好的习惯 虽然通常您不需要重新启动 Webrick 来查看更改 但他暗示在某些特殊情况下可能需要这样做 有谁知道这些情况
  • Rails 3.1 和图像资源

    我已将管理主题的所有图像放入名为 admin 的文件夹内的资产文件夹中 然后我像平常一样链接到它 Ruby image tag admin file jpg CSS logo background url assets images adm

随机推荐

  • 计算数组元素中不同绝对值的数量

    我被问到一个面试问题 要找出数组元素中不同绝对值的数量 我提出了以下解决方案 用 C 编写 但面试官对代码的运行时效率并不满意 我将不胜感激有关如何提高此代码的运行时效率的指示 另外我如何计算下面代码的效率 这for循环执行A size 次
  • 使用 SwiftMailer 将邮件添加到发送文件夹

    我正在使用 SwiftMailer for PHPswiftmailer org 一切正常 但我想知道是否有一种方法可以将已发送的消息从 SwiftMailer 发送的邮件帐户添加到已发送的文件夹中 就这样 祝你有美好的一天 据开发人员称
  • 会话:尝试为具有待处理请求的会话请求新权限

    我想通过 Android 应用程序发布故事 我使用下面的代码 private static final List
  • 为什么inet_ntoa被设计成不可重入函数?

    浏览GNU C Library的源代码 我发现inet ntoa是用 static thread char buffer 18 我的问题是 既然需要使用可重入的inet ntoa 为什么GNU C Library的作者不使用malloc来实
  • codecs.open(utf-8) 无法读取纯 ASCII 文件

    我有一个纯 ASCII 文件 当我尝试用以下命令打开它时codecs open utf 8 我无法读取单个字符 ASCII 是 UTF 8 的子集 为什么不能codecs以UTF 8模式打开这样的文件 test py import code
  • WPF:在 XAML 中设置 ItemSsource 与代码隐藏

    由于这是 WPF 它可能看起来有很多代码 但不要害怕 问题非常简单 我有以下 XAML
  • 添加额外的列到视图中,该列不存在于表中

    我想用三个表的并集创建视图 但在结果查询中我想要一个额外的列 例如 tableId 我的代码就像 CREATE OR REPLACE VIEW DETAILS AS SELECT FROM SELECT T1 ID T1 AMOUNT T1
  • * CSS hack 适用于哪些浏览器和版本? [复制]

    这个问题在这里已经有答案了 我一直在寻找一种 hack 来解决我遇到的 CSS 问题 我已使用其中一个为 Internet Explorer 创建自定义规则 margin top 45px margin top 0px 这个 hack 是否
  • 有限的数字如何运作? (依赖类型)

    我对依赖类型语言感兴趣 有限数对我来说似乎非常有用 例如 安全地索引固定大小的数组 但这个定义对我来说并不清楚 Idris 中有限数的数据类型可以如下 Agda 中可能类似 data FiniteNum Natural gt Type wh
  • 如何用Pygame画一个棋盘并移动棋盘上的棋子?

    我一直在尝试不同的方法如何让我的棋子拖放我找到了方法 但问题是我正在使用字典通过以下方式加载我的图像pygame image load 我为我的图像创建了一个字典 如下所示 IMAGES def loadImages pieces wp w
  • 如何防止ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep?

    我正在尝试访问我的电影 API 该 API 通过 React 应用程序返回包括电影海报图像的数据 该图像是从外部网站请求的 每次我向我的朋友提出请求时 movies端点 图像被阻止 我在控制台中收到以下消息 net ERR BLOCKED
  • 均匀分布的随机数

    嘿 有没有办法选择均匀分布的随机数 我用过这个功能 Math floor Math random 2 它返回 1 或 0 但是 我认为它没有确切 50 的机会产生任何一个 更好的想法 谢谢 如果您不相信 请检查 这段代码给了我 0 4997
  • SQL 性能调优 - 如何?

    性能如何调整 SQL 查询 可以使用哪些技巧 工具 概念来改变 SQL 查询的性能 如何量化收益 一个人需要注意什么 可以使用哪些技巧 工具 概念来改变 SQL 查询的性能 使用索引 他们在实践中如何运作 标准化数据与非标准化数据 性能与设
  • 如何在 Python 中克隆类?

    我有一个 A 类 我想要一个具有完全相同功能的 B 类 我不能或不想从 B 继承 例如执行 class B A pass 我仍然希望 B 与 A 相同 但有不同的 i id A id B 请注意 我不是在谈论实例 而是在谈论要克隆的类 我很
  • 制作 Linux Web 服务的最佳方式? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我有一台运行 Ubuntu Linux Server Edition 的服务器 我曾经有一台 Windows Server 在 Windows 上使用 ASP net 创建 Web 服务很
  • Android 9.0 NotificationManager.notify() 抛出 java.lang.SecurityException

    我自己无法重现这个问题 但到目前为止已经有 5 个用户报告了这个问题 我最近确实发布了一个应用程序更新 将目标 SDK 从 27 更改为 28 我确信这在其中发挥了作用 所有 5 位用户都在某种 Pixel 设备上运行 Android 9
  • 为什么绑定的 StringFormat 不使用当前区域性?

    我目前的文化是 ru RU 我需要它将小数格式化为货币字符串 decimal n 111 22M n ToString C will return 111 22 但是当我尝试使用绑定的 StringFormat 字段时 我得到 111 22
  • 如何查看docker容器使用的核心数?

    我已经使用 Docker 一段时间了 我已经安装了 docker 并使用启动了一个容器 docker run it cpuset cpus 0 ubuntu 当我登录到 docker 控制台并运行时 grep processor proc
  • 使用 C 样式字符串有哪些缺点?

    我知道缓冲区溢出是使用 C 样式字符串 字符数组 的一种潜在危险 如果我知道我的数据适合我的缓冲区 是否可以使用它们 我需要注意 C 风格字符串固有的其他缺点吗 EDIT 这是一个接近我正在做的事情的例子 char buffer 1024
  • 我应该将 jQuery 代码放置在 Ruby on Rails 应用程序中的什么位置?

    我对 RoR 不太熟悉 对 jQuery 也相当陌生 目前 我有一个工作 RoR 网站作为学习平台 我想包含一些 jQuery 基本功能来扩展我的学习 mouseenter hover fadeIn 等 让我用一些代码来设置场景 为了保持简