在 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:56:40  来源:igfitidea点击:

Call javascript function onclick in Rails

javascriptjqueryruby-on-railsruby-on-rails-4coffeescript

提问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:

由于您是新手,让我给您一些有关如何改进代码的想法:



Unobtrusive JS (UJS)

不显眼的 JS (UJS)

This tutorial explains it verywell

本教程说明它非常

Rails convention is geared towards "unobtrusive" javascript functionality. This means you can assign eventsto elements on your page without having to reference those elements directly (don't use inline onclicketc)

Rails 约定面向“不显眼的”javascript 功能。这意味着您可以分配events给页面上的元素而无需直接引用这些元素(不要使用内联onclick

This is best described in the same way as CSS - using inlineCSS 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 相同的方式来描述 - 使用inlineCSS 是非常费力的并且被视为不好的做法(它不是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: trueoption of this calls the Rails UJS driver's ajaxfunctionality- 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:successprocess, 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 中的函数不是全局的。