Question

This would be better explained in code:

var FileResourceManager = {
        LoadRequiredFiles: function (config) {
            config = config || {};

            this.OnLoading = config.onLoadingCallback;
            this.OnComplete = config.onCompleteCallback;

            //this works fine here.
            if (this.OnLoading) {
                this.OnLoading();
            }

            Modernizr.load([{
                load: 'somefile.js',
                complete: function () {
                        //Error in this callback here.
                        if (this.OnComplete) {
                            this.OnComplete();
                        }
                }
            });
        }

    };
    FileResourceManager.LoadRequiredFiles({
        onLoadingCallback: function () {
            alert('started');
        },
        onCompleteCallback: function () {
            alert('complete');
        }
    });

As you can see, in the callback for Modernizr.load’s complete event, I want to call the method of the parent/outer object. But this actually became the Modernizr object. How can I access the properties of the outer object inside an event?

I’ve seen this done in the backbone.js project, by using some form of binding. I’m not sure if I need to write something like this.

Answer 1

var self = this;

Modernizr.load([{
            load: 'somefile.js',
            complete: function () {
                    //Error in this callback here.
                    if (self.OnComplete) {
                        self.OnComplete();
                    }
            }
        });