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;

但是，当我点击按钮时，我在控制台中收到错误未捕获的ReferenceError：未定义分析。我认为我的onclick没有正确定义。建议的方法是什么？

Answer 1

我是网络开发的新手

由于您是新手，请允许我就如何改进代码提供一些建议：

Unobtrusive JS (UJS)

This tutorial explains it very well

Rails惯例适用于“不引人注目的”javascript功能。这意味着您可以将events分配给页面上的元素，而无需直接引用这些元素（不使用内联onclick等）

这最好用与CSS相同的方式描述 - 使用inline CSS是非常费力的＆amp;被视为不良做法（不是DRY）。更好的方法是拥有一个中央样式表，然后您可以使用它来设置页面上的元素样式。

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

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

这一点的重要性无法说明 - 拥有不引人注目的JS是您可以应用的最佳编程模式之一;它不仅会破坏您的代码，还能确保未来的开发能够保持modular（开发中的黄金标准）

<强>的Ajax

由于您使用的是ajax，因此您可能希望使用Rails UJS Ajax functionality，这基本上意味着：

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

remote: true 选项调用Rails UJS driver's ajax functionality - 基本上设置ajax调用，而无需编写任何代码。需要注意的是，您需要处理自己的ajax:success进程，并且需要将元素指向正确的href

我会这样做：

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

Answer 2

改变这个：

analyze = ->

对此：

window.analyze = ->

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

在Rails中调用javascript函数onclick

2 个答案: