将其绑定到youtube api statechange

Question

当在require.js和骨干应用程序中使用youtube播放器javascript api时，我有一个关于'this'的问题。youtube iframe_api正在加载在require.js模块中，我不包括在下面。下面是我的代码，它都遵循典型的骨干扩展布局的视图。

    youTubePlayer: function() {
        var player,
            self = this,
            i = 0;
        self.videoArray = [];
        if ($('.slidevideo').length) {
            _.each($('.slidevideo'), function(el, i) {
                var YTid = $(el).data('videoid');
                self.player = new YT.Player('Player-' + YTid, {
                    videoId: YTid,
                    playerVars: {
                        enablejsapi: 1
                    }
                });
                self.videoArray.push(self.player);
            });
        };
        setTimeout(function(){
            _.each(self.videoArray, function(video) {
                video.addEventListener("onStateChange", self.stateChange)
            });
        }, 5000);
    },
    stateChange: function(e){
        console.log(e);
                    console.log(this);
    }

问题是stateChange函数中的'this'失去了对骨干视图的引用，而是引用了我加载youtube API和YT构造函数的全局窗口对象。我如何保持'this'在骨干视图范围内?非常感谢。

Answer 1

使用_.bind:

video.addEventListener("onStateChange", _.bind(self.stateChange, self));