使用库在 CoffeeScript 中获取回调

Question

我正在使用YouTube API 在页面上嵌入视频。我打电话给swfobject.embedSWF，它在页面上嵌入了视频，它可以工作。加载完成后，API 应该调用onYouTubePlayerReady。但我的问题是，我必须在我的类中将回调放在哪里才能调用函数？

这是我尝试过的代码，但不起作用。

class YouTube

    constructor: (@uid) ->
        youtube_video_container =   $('<div/>', {
              id: 'ytapiplayer'
        }).appendTo(main);

        params = { allowScriptAccess: "always" };
        atts = { id: "myytplayer" };

        swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=d9NF2edxy-M&version=3&enablejsapi=1", "ytapiplayer", "1280", "720", "8", null, null, params, atts);

    onYouTubePlayerReady: (playerId) ->
           alert "ready"

Answer 1

我想我找到了一个很好的解决方案，可以让回调在 swfObject 库中工作，这与 txominpelu 的建议非常相似。似乎使用-> callbackFn 效果很好，基本上是创建一个匿名函数并返回回调？我会很感激有人让我直截了当地说明为什么这可能都是错误的。 （我通常第一次就错了）

我将swfobject.embedSWF 与callbackFn 一起使用，这在我使用function callbackFn() {} 定义的手动编码JavaScript 文件中运行良好。现在我正在尝试使用 CoffeeScript，它非常棒。所以 CoffeeScript 将编译 callbackFn = function() {};。我原来的 swfObject.embedSWF 不适用于我的回调的 CoffeeScript 编译版本。

// original javascript file approach
swfobject.embedSWF( "swf/flashContent.swf", "site-content", 
                    "100%", "100%", "10.0.0", false, 
                    flashvars, params, attributes, callbackFn );

// original javascript callback
function callbackFn() {
  log( "--> callbackFn invoked ");
  // ... do stuff
}

我是 CoffeeScript 新手，我认为只有你一次 get named functions is with a class

我首先尝试使用匿名函数来代替swfObject wiki 中详述的可选回调参数。然后我想我也许可以得到类似的东西来使用 CoffeeScript 版本。这就是我结束的地方。

# part of .coffee file
swfobject.embedSWF "swf/flashContent.swf", "site-content", 
                   "100%", "100%", "10.0.0", false, 
                    flashvars, params, attributes, -> callbackFn()

callbackFn = (evt) ->
  console.log "--> callbackFn invoked #{evt}"
  # do other stuff


# part compiled .js file
swfobject.embedSWF("swf/flashContent.swf", "site-content",  
                   "100%", "100%", "10.0.0.", false, 
                   flashvars, params, attributes, function() {
                     return callbackFn();
                   });

callbackFn = function() { ... }

我还研究了通过 callbackFn 传递事件，看起来它有效。

# .coffee file swf
@swfobject.embedSWF "swf/flashContent.swf", "site-content", 
                    "100%", "100%", "10.0.0.", false, 
                    flashvars, params, attributes, -> callbackFn(@swfobject)

callbackFn = (evt) ->
  console.log "--> callbackFn invoked #{evt}"
  # do other stuff

Answer 2

来自fine manual：

此外，任何包含 YouTube 播放器的 HTML 页面都必须实现名为 onYouTubePlayerReady 的 JavaScript 函数。当播放器完全加载并且 API 准备好接收调用时，API 将调用此函数。

和onYouTubePlayerReady:

onYouTubePlayerReady(playerid)

在播放器完全加载且 API 准备好接收调用时调用。如果通过 URL 参数将 playerapiid 传递给播放器，那么它将传递给此函数。

因此，如果您在 URL 的 CGI 参数中包含 &playerapiid=X，那么当调用 onYouTubePlayerReady 时，X 将成为 playerid。

所有这些都表明onYouTubePlayerReady 是一个全局 函数，而不是您选择的对象上的方法或您可以随意指定的回调。要使用 CoffeeScript 创建一个全局函数，请在 window 上创建一个属性：

window.onYouTubePlayerReady = (playerid) ->
    alert 'Ready'

您必须使用 playerid 通过一些全局可访问的 playerid-to-object 映射回溯到创建玩家的特定对象。

即使是 addEventListener 接口也是基于名称而不是回调，因此您不得不自己污染全局命名空间和路由。

Answer 3

我认为替换以下代码的 embedSWF 调用可能会起作用：

swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=d9NF2edxy-M&version=3&enablejsapi=1", "ytapiplayer", "1280", "720", "8", null, null, params, atts, this.onYouTubePlayerReady);

试一试，让我知道它是否有效。

修改只是意味着您将它作为最后一个参数传递给您希望它视为回调函数的函数。