CoffeeScript-如何在Rails中使用ruby中的coffeescript？

Question

我正在使用Rails中的Ruby中的CoffeeScript。 我正在使用http://js2.coffee/将JavaScript和jquery转换为CoffeeScript。

我们知道，Ruby on Rails在创建任何控制器时都会默认为我们提供.coffee文件。

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

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

并且如果我通过在同一页面（即test.html.erb使用javascript或jquery来为此按钮定义脚本，则它可以工作。

我的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代码的脚本

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

在文档准备就绪后调用第一个方法，但是在第一个方法之前调用第一个方法，此时可能尚未创建ID为'p'的元素，因此document.getElementById('p')返回null，并提出上述错误。

Answer 3

我们可以在咖啡脚本中使用back-tick（`）添加Java脚本。

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

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