Coffeescript - 如何将 javascript 转换为 ruby​​ on rails 中的咖啡脚本？

Question

我在test.html.erb 的视图中有一个按钮，如下所示

<button  id="Todo_full" onclick="showFullscreen(this);">Full size</button>

其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();
        }
    } 

当我将 javascript 代码保留在 test.html.erb 文件的下方时，它可以正常工作。 当我通过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

在控制台显示错误

Uncaught ReferenceError: showFullscreen is not defined
    at HTMLButtonElement.onclick ((index):384)

即使我在咖啡脚本代码的顶部使用window.onload = ->，我也会在控制台中遇到同样的错误。

谢谢

Answer 1

您遇到的问题是 JS 和 CoffeeScript 之间的范围不同。要使您的代码正常工作，您需要在 window 或 CoffeeScript 简写 @ 上全局范围内定义您的函数。

来自CoffeeScript docs：

如果您想创建顶级变量供其他脚本使用， 将它们作为属性附加到window。

你的函数应该是这样的：

# Using window
window.showFullscreen = (event) ->
  elem = document.getElementById('card_' + event.id)
  ...

# Or using @
@showFullscreen = (event) ->
  elem = document.getElementById('card_' + event.id)
  ...

CoffeeScript @ 是 JavaScript 中 this 的简写。因此，在您的示例中，因为您在顶级窗口范围window == @ 定义函数。请记住，在你的函数中，作用域是不同的，window != @，而是@ 的作用域是你函数内部的this。 This blog post has a nice explanation:

说到this，CoffeeScript 有一个快捷方式，@ 符号。 很容易把它写成毫无意义的语法糖，但它 很有用。首先，转换以@为前缀的构造函数参数 进入属性：

 # CoffeeScript
 class User
   constructor: (@id) ->

 // JavaScript
 function User(id) {
   this.id = id;
 }

除此之外，这是定义类方法的好方法：

 # CoffeeScript
 class User
   constructor: (@id) ->

    @findById: (id) =>
    ...

 // JavaScript
 function User(id) {
   this.id = id;
  }
 User.findById = function() {};

@ 和胖箭头=> 都不代表你不用担心 this（或其别名 @）的当前含义。他们不是银 子弹，这并不是说它们没有增加价值。