How to reference widget property from methods called from another context

Question

My jquery-ui widget has some properties that I need to access on a callback. The problem is the context is transient.

Everything I've read says to create my variables in _create constructor and to preserve a reference to the widget in 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));

Trying to reference that in _videoInit creates an error:

Use of an implicitly defined global variable

But the:

console.log(this);

in _videoInit refers to the video itself so calling

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

fails to because a video doesn't have a Video property. I've omitted a bunch of other code for simplicity but after this call I actually need a reference to the widget to do something with the cues loaded into the video so just doing this:

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

is not an option.

How do i access the context to get at the video and then do something with it using the properties of the widget instance?

So for instance how do I do this?

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

I can't use that because of the implicit error as above and I can't use this because this is a video element reference not a videoWrapper widget reference. And i can't do:

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

in _create because the cues and other meta data aren't initiated at that point. It seems like such a basic thing to want to do "access an objects properties from it's methods".

score 0 · Answer 1 · edited May 23 '17 at 12:14

Ok so from this preserving-a-reference-to-this-in-javascript-prototype-functions I got the jquery bind method. That question is talking about Prototypes which I thought were like static methods but it seems to work.

Setting up the handler:

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

The bind page says to now use the jquery on method

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

And then using as I wanted:

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

Feels a bit weird and loose but seems to work as expected.

How to reference widget property from methods called from another context

1 Answers1