CoffeeScript -如何在ruby on rails中使用coffeescript？

Question

我正在使用Ruby on rails中的CoffeeScript。我正在使用http://js2.coffee/将我的javascript和jquery转换成CoffeeScript。

我们知道，当我们创建控制器时，Ruby on Rails默认为我们提供了.coffee文件。

在我的视图文件夹中，我定义了一个test.html.erb文件，我有一个按钮

<button id="p">try</button>

如果我在同一页面中使用javascript或jquery来定义此按钮的脚本，即test.html.erb，它就可以工作。

我的javascript代码

document.getElementById("p").onclick = function() {myFunction()};
function myFunction() {
    alert("hello");
}

和我的jquery

$(document).ready(function(){
    $("#p").click(function(){
        alert("hello");
    });
});

现在，我已经在app/assets/javascripts/test.coffee中创建了一个自定义文件

我的jquery代码的coffeescript

$(document).ready ->
  $('#p').click ->
    alert 'hello'
    return
  return

当我在我的test.coffee中使用它时，它工作得很好。

javascript代码的coffeescript

myFunction = ->
  alert 'hello'
  return

document.getElementById('p').onclick = ->
  myFunction()
  return

当我在test.coffee中使用此代码时，它会在我的控制台中显示错误

Uncaught TypeError: Cannot set property 'onclick' of null

我也尝试过test.js.coffee，但仍然得到相同的错误

那么我应该只使用jquery生成的coffeescript，还是有什么方法可以使用javascript生成的coffeescript呢？

Answer 1

问题是在页面上找不到element_with_id "p“，因为在页面加载之前加载了coffeescript。将您的代码包装在document.ready中，这将在页面加载完成后调用coffeescript。

$(document).ready ->
  myFunction = ->
   alert 'hello'
   return

  document.getElementById('p').onclick = ->
    myFunction()
    return

Answer 2

您的第一个方法是在document ready之后调用的，但最后一个方法的调用早于第一个方法，在第一个方法中，id为'p‘的元素可能尚未创建，因此document.getElementById('p')返回null，并引发上面的错误。

Answer 3

我们可以在咖啡脚本中使用反勾(`)添加java-script。

window.onload = ->
   `document.getElementById("demo").onclick = function() {myFunction()};

   function myFunction() {
       document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
   }`