[英]Coffeescript - How to convert a javascript into coffeescript in ruby on rails?
I have a button in my views in test.html.erb
as follows我在
test.html.erb
视图中有一个按钮,如下所示
<button id="Todo_full" onclick="showFullscreen(this);">Full size</button>
and its javascript is as follows:其javascript如下:
function showFullscreen(event)
{
var elem = document.getElementById('card_' + event.id);
if (elem.requestFullscreen) {
return elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen)
{
/* Firefox */
return elem.mozRequestFullScreen();
}
}
When I keep the javascript code at the below of the test.html.erb
file it works fine.当我将 javascript 代码保存在
test.html.erb
文件的下面时,它工作正常。 And when I convert this code into coffeescript through http://js2.coffee/ and keep the code in app/assets/javascript/test.coffee
which is as follows:当我通过http://js2.coffee/将此代码转换为 coffeescript 并将代码保存在
app/assets/javascript/test.coffee
中时,如下所示:
showFullscreen = (event) ->
elem = document.getElementById('card_' + event.id)
if elem.requestFullscreen
return elem.requestFullscreen()
else if elem.mozRequestFullScreen
### Firefox ###
return elem.mozRequestFullScreen()
return
It shows an error in console它在控制台中显示错误
Uncaught ReferenceError: showFullscreen is not defined
at HTMLButtonElement.onclick ((index):384)
Even when I use window.onload = ->
at the top of coffeescript's code I get the same error in console.即使我在 coffeescript 代码的顶部使用
window.onload = ->
我在控制台中也会遇到同样的错误。
Thank you谢谢
The issue you're running into is the different scoping between JS and CoffeeScript.您遇到的问题是 JS 和 CoffeeScript 之间的不同范围。 To get your code working, you need to scope your function globally on
window
or the CoffeeScript shorthand @
.为了让您的代码正常工作,您需要在
window
或 CoffeeScript 速记@
上全局范围内定义您的函数。
From the CoffeeScript docs :来自CoffeeScript 文档:
If you'd like to create top-level variables for other scripts to use, attach them as properties on
window
.如果您想为其他脚本创建顶级变量以供使用,请将它们作为属性附加到
window
。
Which for your function would look like:对于您的功能,它看起来像:
# Using window
window.showFullscreen = (event) ->
elem = document.getElementById('card_' + event.id)
...
# Or using @
@showFullscreen = (event) ->
elem = document.getElementById('card_' + event.id)
...
The CoffeeScript @
is shorthand for this
in JavaScript. CoffeeScript
@
是 JavaScript 中this
简写。 So, in your example, because you're defining the function at the top level window scope window == @
.因此,在您的示例中,因为您是在顶级窗口范围
window == @
定义函数。 Keep in mind that within your functions the scope will be different and window != @
, and instead @
will be scoped to whatever this
is inside of your function.请记住,在您的函数中,作用域会有所不同,并且
window != @
,而@
作用域将限定为您函数内的任何this
。 This blog post has a nice explanation: 这篇博文有一个很好的解释:
Speaking of
this
, CoffeeScript has a shortcut for it, the@
symbol.说到
this
,CoffeeScript 有一个快捷方式,@
符号。 It's easy to write this off as meaningless syntactical sugar, but it is useful.很容易把它写成毫无意义的语法糖,但它很有用。 First, constructor parameters prefixed with
@
are converted into properties:首先,以
@
为前缀的构造函数参数被转换为属性:# CoffeeScript class User constructor: (@id) ->
// JavaScript function User(id) { this.id = id; }
Beyond this though, it's a nice way to define class method:
除此之外,这是定义类方法的好方法:
# CoffeeScript class User constructor: (@id) -> @findById: (id) => ...
// JavaScript function User(id) { this.id = id; } User.findById = function() {};
Neither
@
nor the fat arrow=>
mean that you don't have to worry about the current meaning ofthis
(or its alias@
).@
和粗箭头=>
都不意味着您不必担心this
(或其别名@
)的当前含义。 They aren't silver bullets, which isn't to say that they don't add value.它们不是灵丹妙药,这并不是说它们不会增加价值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.