在Rails中点击时调用Javascript函数

Question

我在一个视图中有以下代码：

<button type="button" onclick="analyze();">Analyze</button>

同时，对应控制器的.js.coffee文件包含以下内容：

analyze = ->

  $.ajax
    type: "GET"
    url: "http://localhost:3000/api/logs"
    success: (data) ->
      Analytics.doAnalysis data
      return;

  return;

但是，当我点击按钮时，在控制台中会出现一个错误，显示Uncaught ReferenceError: analyze is not defined。我认为我的onclick定义不正确。有什么推荐的做法吗？

- Peeyush

Answer 1

我刚开始学习网页开发

既然你是新手，让我给你一些提高代码质量的建议：

---

Unobtrusive JS (UJS)（不显眼的JS）

这个教程解释得非常好

Rails约定旨在支持“不显眼”的javascript功能。这意味着您可以将事件分配给页面上的元素，而无需直接引用这些元素（不要使用内联onclick等）。

这与CSS的方式相同-使用内联CSS非常费力且被视为不良实践（不是DRY）。更好的方法是拥有一个中央样式表，您可以在其中为页面上的元素设置样式。

不显眼的Javascript以相同的方式工作-将所有内容保存在您在运行时调用的文件中：

#app/assets/javascripts/application.js
$(".element").on("click", function(){
    ...
});

这一点的重要性无法言喻 - 拥有不显眼的JS是您可以应用的最佳编程模式之一; 它不仅可以使您的代码更加简洁，而且还可以确保未来的开发保持模块化（在开发中的黄金标准）。

---

Ajax

由于您正在使用 Ajax，您可能希望使用 Rails UJS Ajax 功能，这基本上意味着：

<%= button_to "Analyze", analytics_api_path, id: "analyze", remote: true %>

这里的 remote: true 选项会调用 Rails UJS 驱动程序的 ajax 功能，基本上设置了一个 ajax 调用，无需编写任何代码。需要注意的是，您需要处理自己的 ajax:success 过程，并且您需要将元素指向正确的 href。

我会这样做：

#app/assets/javascripts/application.js.coffee
$("#analyze").on "ajax:success", (data, status, xhr) ->
    Analytics.doAnalysis data

- Richard Peck

Answer 2

更改此内容：

analyze = ->

变成这样：

window.analyze = ->

默认情况下，Coffeescript 中的函数不是全局函数。

- gwcoffey

---

非常感谢 :) 我是新手网页开发者，还有一个问题。有没有办法在不将其设为全局的情况下访问函数？最佳实践是什么？ - Peeyush

“最佳”实践具有争议性，但您可以阅读关于“不显眼”JavaScript的文章。在完美的世界中，您的javascript会将自己注入HTML，而不是HTML指向Javascript函数。请参见：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#unobtrusive-javascript - gwcoffey