在 Rails 中调用 javascript 函数 onclick
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/23989512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call javascript function onclick in Rails
提问by Peeyush
I have the following code in one of my views:
我的其中一个视图中有以下代码:
<button type="button" onclick="analyze();">Analyze</button>
And, the .js.coffeefile for the corresponding controller contains
并且,对应控制器的.js.coffee文件包含
analyze = ->
$.ajax
type: "GET"
url: "http://localhost:3000/api/logs"
success: (data) ->
Analytics.doAnalysis data
return;
return;
But, when I click the button, I get an error in console saying Uncaught ReferenceError: analyze is not defined. I think my onclick is not correctly defined. What is the recommended way of doing this?
但是,当我单击按钮时,我在控制台中收到错误消息Uncaught ReferenceError: analyze is not defined。我认为我的 onclick 定义不正确。这样做的推荐方法是什么?
回答by Richard Peck
I am new to web development
我是 Web 开发的新手
Since you're new, let me give you some ideas on how to improve your code:
由于您是新手,让我给您一些有关如何改进代码的想法:
This tutorial explains it verywell
Rails convention is geared towards "unobtrusive" javascript functionality. This means you can assign events
to elements on your page without having to reference those elements directly (don't use inline onclick
etc)
Rails 约定面向“不显眼的”javascript 功能。这意味着您可以分配events
给页面上的元素而无需直接引用这些元素(不要使用内联onclick
等)
This is best described in the same way as CSS - using inline
CSS is ridiculously laborious & seen as bad practice (it's not DRY
). A much better way is to have a central stylesheet, which you can then use to style elements on the page.
这最好用与 CSS 相同的方式来描述 - 使用inline
CSS 是非常费力的并且被视为不好的做法(它不是DRY
)。更好的方法是拥有一个中央样式表,然后您可以使用它来设置页面上的元素样式。
Unobtrusive Javascript works in the same way - keep everything in files you call at runtime:
Unobtrusive Javascript 以相同的方式工作 - 将所有内容保存在您在运行时调用的文件中:
#app/assets/javascripts/application.js
$(".element").on("click", function(){
...
});
The importance of this cannot be stated enough - having unobtrusive JS is one of the best programming patterns you can apply; it not only DRIES up your code, but also ensures future development can be kept modular(a gold standard in development)
这一点的重要性不言而喻 - 拥有不引人注目的 JS 是您可以应用的最佳编程模式之一;它不仅可以干掉你的代码,还可以确保未来的开发可以保持模块化(开发中的黄金标准)
Ajax
阿贾克斯
Since you're using ajax, you may wish to use the Rails UJS Ajax functionality, which basically means this:
由于您使用的是 ajax,您可能希望使用Rails UJS Ajax 功能,这基本上意味着:
<%= button_to "Analyze", analytics_api_path, id: "analyze", remote: true %>
The remote: true
option of this calls the Rails UJS driver's ajax
functionality- basically setting up an ajax call without you having to write any code. The caveats of this are that you need to handle your own ajax:success
process, and you'll need to point the element to the correct href
这个remote: true
选项调用Rails UJS 驱动程序的ajax
功能- 基本上设置一个 ajax 调用,而无需编写任何代码。需要注意的是,您需要处理自己的ajax:success
流程,并且需要将元素指向正确的href
I would do this:
我会这样做:
#app/assets/javascripts/application.js.coffee
$("#analyze").on "ajax:success", (data, status, xhr) ->
Analytics.doAnalysis data
回答by gwcoffey
Change this:
改变这个:
analyze = ->
To this:
对此:
window.analyze = ->
Functions in coffeescript are not global by default.
默认情况下, coffeescript 中的函数不是全局的。