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构造函数的全局窗口对象。如何在Backbone视图中保留“this”范围？非常感谢你提前。

Answer 1

使用_.bind：

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

将此绑定到youtube api statechange

1 个答案: