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!";
   }`