Question

我的jquery-ui小部件有一些我需要在回调上访问的属性。问题是背景是暂时的。

我读过的所有内容都表示要在_create构造函数中创建变量，并在that中保留对小部件的引用：

(function ($) {
    $.widget("tsp.videoWrapper", {
        options: {
            value: 0,
            playBtnObj: null,
            timeboxElement: null,
            chapterNavElement: null,
            segmentBarElement: null,
            positionViewElement : null
        },
        _create: function () {
            var that = this;
            var thatElm = $(that.element);
            that.Video = thatElm.children("video")[0];
            if (that.Video == null) {
                console.log("Video element not found.");
                return;
            }
            that._addHandlers();             
        },
        _addHandlers: function () {
            this.Video.addEventListener("loadedmetadata", this._videoInited, false);
            if (this.Video.readyState >= this.Video.HAVE_METADATA) {
                this._videoInited.apply(this.Video); // missed the event
            }
        },
        _videoInited: function (evt) {
            console.log(this);
            console.log(this.Video.textTracks[0]);
        });
}(jQuery));

尝试在that中引用_videoInit会产生错误：

使用隐式定义的全局变量

但是：

console.log(this);

_videoInit中的

指的是视频本身正在调用

console.log(this.Video.textTracks[0]);

失败，因为video没有Video属性。为简单起见，我省略了一堆其他代码，但是在这次调用之后，我实际上需要一个对小部件的引用来处理加载到视频中的提示，所以只是这样做：

console.log(this.textTracks[0]);

不是一种选择。

如何访问上下文以获取视频，然后使用窗口小部件实例的属性对其执行某些操作？

那么我怎么做呢？

_videoInited: function (evt) {
    // pretend up in _create I had: that.Cues=[]
    that.Cues = that.Video.textTracks[0].cues;
});

我无法使用that，因为上面隐含的错误而我无法使用this因为this是视频元素引用而不是videoWrapper小部件参考。我做不到：

    that.Cues = that.Video.textTracks[0].cues;

<{1>}中的

因为此时未启动_create和其他元数据。想要“从它的方法访问对象属性”似乎是一件基本的事情。

Answer 1

好的，preserving-a-reference-to-this-in-javascript-prototype-functions我得到了jquery bind方法。那个问题是谈论Prototypes，我认为它们就像静态方法，但似乎有效。

设置处理程序：

var that = this;
 $(this.Video).bind("loadedmetadata", function (event) {
      event.widget = that; that._videoInited(event); 
});

绑定页面现在说使用jquery on方法

 var that = this;
 $(this.Video).on("loadedmetadata", function (event) {
          event.widget = that; that._videoInited(event); 
 });

然后按我的意愿使用：

 _videoInited: function (evt) {
            console.log(evt); // has a new dynamic widget property
            console.log(this); // refers to the widget

感觉有点奇怪和松散，但似乎按预期工作。

如何从另一个上下文调用的方法引用widget属性

1 个答案: