CoffeeScript-如何在ruby on rails中使用CoffeeSript

Question

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

我们知道，当我们创建任何控制器时，RubyonRails默认会为我们提供.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代码的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生成的co啡escript？

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

我们可以在coffee脚本中使用backtick(`(添加java脚本。

window.onload = ->
`document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}`