热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在RubyonRails中使用Javascript?

如何解决《如何在RubyonRails中使用Javascript?》经验,为你挑选了1个好方法。

我想我从根本上误解了如何在我的rails应用程序中实现Javascript.我的理解是你将Javascript抛出到你的application.js文件中,然后你可以使用DOM来引用元素jQuery,以便创建一个交互式网页.

我刚检查了所有代码,看起来很干净(如果我错了,请在下面发布).我的想法是我可能把我的Javascript放在错误的地方,或者我在某个地方错过了依赖?我发现其他帖子对我来说几乎无益.如何将Javascript合并到我的应用程序中?

的application.js

function main() {
  $('.answers-box').hide();
  $('.qaa-box').on('click', function() {
    $(this).next().slideToggle(400);
  });
}
$(document).ready(main());

page.html.erb

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

小智.. 5

你找到了吗?
在哪里坚持你的Javascript.

在哪里坚持你的Javascript

无论您是使用Rails资产管道还是直接向视图添加标记,您都必须选择放置任何本地Javascript文件的位置.

我们为本地Javascript文件选择了三个位置:

app/assets/Javascripts文件夹

lib/assets/Javascripts文件夹

vendor/assets/Javascripts文件夹

以下是为脚本选择位置的准则:

使用app/assets/JavascriptsJavascript的您为您的应用程序.

使用lib/assets/Javascripts了由许多应用程序共享脚本(但使用的宝石,如果你能).

使用vendor/assets/Javascripts了jQuery插件等,从其他开发商的副本.

最简单的情况下,当所有Javascript文件都在app/assets/Javascripts文件夹中时,您无需做任何其他事情.

在其他任何地方添加Javascript文件,您将需要了解如何修改清单文件.

神秘的清单
Javascript资源文件夹中有两种文件:

普通的Javascript文件

清单文件
您还可以拥有普通 Javascript文件的变体CoffeeScript文件和文件.ERB

清单文件与普通Javascript文件具有相同的.js文件扩展名.清单文件和普通Javascript文件可以组合在一个文件中.这使得清单文件变得神秘,或者至少是非显而易见的.

默认的app/assets/Javascripts/application.js文件是manifest file.它是一个清单文件,因为它包含指令:

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

指令告诉Sprockets应该组合哪些文件来构建单个Javascript脚本.包含清单指令的每个文件都将成为与原始清单文件同名的单个Javascript脚本.因此,app/assets/Javascripts/application.js清单文件变成application.js脚本.

当清单文件包含默认的// = require_tree时,文件app/assets/Javascripts夹中的所有脚本都会自动添加到默认application.js脚本中.指示.

希望这可以帮助.



1> 小智..:

你找到了吗?
在哪里坚持你的Javascript.

在哪里坚持你的Javascript

无论您是使用Rails资产管道还是直接向视图添加标记,您都必须选择放置任何本地Javascript文件的位置.

我们为本地Javascript文件选择了三个位置:

app/assets/Javascripts文件夹

lib/assets/Javascripts文件夹

vendor/assets/Javascripts文件夹

以下是为脚本选择位置的准则:

使用app/assets/JavascriptsJavascript的您为您的应用程序.

使用lib/assets/Javascripts了由许多应用程序共享脚本(但使用的宝石,如果你能).

使用vendor/assets/Javascripts了jQuery插件等,从其他开发商的副本.

最简单的情况下,当所有Javascript文件都在app/assets/Javascripts文件夹中时,您无需做任何其他事情.

在其他任何地方添加Javascript文件,您将需要了解如何修改清单文件.

神秘的清单
Javascript资源文件夹中有两种文件:

普通的Javascript文件

清单文件
您还可以拥有普通 Javascript文件的变体CoffeeScript文件和文件.ERB

清单文件与普通Javascript文件具有相同的.js文件扩展名.清单文件和普通Javascript文件可以组合在一个文件中.这使得清单文件变得神秘,或者至少是非显而易见的.

默认的app/assets/Javascripts/application.js文件是manifest file.它是一个清单文件,因为它包含指令:

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

指令告诉Sprockets应该组合哪些文件来构建单个Javascript脚本.包含清单指令的每个文件都将成为与原始清单文件同名的单个Javascript脚本.因此,app/assets/Javascripts/application.js清单文件变成application.js脚本.

当清单文件包含默认的// = require_tree时,文件app/assets/Javascripts夹中的所有脚本都会自动添加到默认application.js脚本中.指示.

希望这可以帮助.


推荐阅读
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • HashMap的相关问题及其底层数据结构和操作流程
    本文介绍了关于HashMap的相关问题,包括其底层数据结构、JDK1.7和JDK1.8的差异、红黑树的使用、扩容和树化的条件、退化为链表的情况、索引的计算方法、hashcode和hash()方法的作用、数组容量的选择、Put方法的流程以及并发问题下的操作。文章还提到了扩容死链和数据错乱的问题,并探讨了key的设计要求。对于对Java面试中的HashMap问题感兴趣的读者,本文将为您提供一些有用的技术和经验。 ... [详细]
author-avatar
mobiledu2502911797
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有